如何在 JavaScript 中使用包含大数据集的图表
How to use chart in JavaScript with large data set
我需要使用 Javascript 可视化条形图。所以我使用 C3 JS 来可视化图表。我只是按如下方式使用此条形图,
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
},
tick: {
format: d3.format("$,") // ADD
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
</script>
但问题是当 X 轴包含大数据集图表时变得拥挤。我有700多条数据。
有什么方法可以避免这种情况吗?我可以在主 X 轴和次 X 轴之间添加滚动条吗?
Google,真是太棒了;)
https://c3js.org/samples/interaction_zoom.html
或这个
C3 / D3 bar chart with horizontal scroll
我需要使用 Javascript 可视化条形图。所以我使用 C3 JS 来可视化图表。我只是按如下方式使用此条形图,
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
},
tick: {
format: d3.format("$,") // ADD
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
</script>
但问题是当 X 轴包含大数据集图表时变得拥挤。我有700多条数据。
有什么方法可以避免这种情况吗?我可以在主 X 轴和次 X 轴之间添加滚动条吗?
Google,真是太棒了;)
https://c3js.org/samples/interaction_zoom.html
或这个
C3 / D3 bar chart with horizontal scroll