角高图表-动态图表介绍

什么是角高图表

角高图表是一种用于展示数值随时间变化的图表，可以清晰地展示趋势和变化。角高图表最初用于展示金融市场数据，但在数据可视化方面已被广泛应用。它通过显示每个时间段的最高值、最低值、开盘价和收盘价，形成一个具有代表性的“蜡烛图形”。

优点

• 相对于其他图表，角高图表更能展示数据的波动情况，更为灵敏。
• 角高图表的根据时间展示的方式，使数据的变化趋势清晰可见。

动态图表的优点

与静态图表相比，动态图表可以展示数据的时序变化，直观地展示数据的演变过程，让用户可以更深入地理解数据特征，更准确地分析数据。

如何生成角高图表-动态图表

在生成角高图表-动态图表时，我们可以使用一些图表库来简化我们的工作，并提供良好的可视化效果。

常见的图表库包括：

• D3.js：D3是一个用于创建动态数据可视化的JavaScript库。但需要更多的代码来构建可视化。
• Chart.js：一个灵活的基于JavaScript的图表库，可以用来创建多种类型的静态和动态图表。
• ECharts：ECharts是一个基于JavaScript的开源可视化库，可以创建呈现生动好看的漂亮图表。

以下是使用ECharts库生成角高图表-动态图表的代码片段:

<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>

<!-- 在 HTML 中添加一个容器 -->
<div id="myChart" style="height: 400px"></div>

<!-- 在 JavaScript 中使用 ECharts 生成角高图表 -->
<script>
var chartDom = document.getElementById('myChart');
var myChart = echarts.init(chartDom);

var option;

// 数据
var data = [
    [3531, 3521, 3531, 3510],
    [3516, 3510, 3517, 3508],
    [3508, 3513, 3517, 3501],
    [3512, 3512, 3518, 3503],
    [3495, 3495, 3502, 3485],
    // ...
];

// 绘制角高图表
option = {
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        type: 'k',
        data: data
    }]
};

myChart.setOption(option);
</script>

以上代码可以实现创建一个高度为400像素的动态角高图表。