如何动态设置图形折线图？

Question

我想在折线图中显示我的数据。我的数据系列如下

Video % watched	No of people (Total : 19)	% of people watched
0-9 %	1	5
10-19 %	2	11
20-29 %	1	5
30-39 %	4	21
40-49 %	2	11
50-59 %	4	21
60-69 %	1	5
70-79 %	1	5
80-89 %	0	0
90-99 %	3	16

现在我的 X 轴将是“% 的观看人数”（第 3 列）从 0 开始，Y 轴将是“% 的视频已观看'（第一列）。

如何在图表中设置数据？正在尝试 Highchart 但找不到解决方案。像下图这样

感谢您的帮助。

Answer 1

我不确定您希望它看起来像什么。从你的 table 中，我了解到将有两个系列（没有人 和 % 的人观看），但在你的图，我只看到一个系列

我们有很多方法可以做到这一点。首先，我建议使用 数据模块 从 CSV 文件中获取这些数据（您可以在下面的演示中的 HTML 部分中看到它）。您可以使用类别轴标记已观看视频的百分比。

演示： https://jsfiddle.net/BlackLabel/ztfxr1ek/

API 参考资料： https://api.highcharts.com/highcharts/data.csv https://api.highcharts.com/highcharts/xAxis.categories

Highcharts.chart('container', {
 chart: {
  type: 'spline'
 },
 xAxis: {
  categories: ['0-9%', '10-19%', '20-29%', '30-39%', '40-49%', '50-59%']
 },
data: {
 csv: document.getElementById('csv').innerHTML
},
plotOptions: {
 series: {
   marker: {
     enabled: false
   }
 }
}
});

如何动态设置图形折线图？

How to set the graph line chart dynamically?

javascript

jquery

charts

graph

highcharts