For example i have the array [1,2,3,4,5,6,7,8,9,10,11,12,13] and i only want to display the subarray [5,6,7,8,9].
例如,我有一个数组[1、2、3、4、5、6、7、8、9、10、11、12、13],我只想显示子数组[5、6、7、8、9]。
Is this posible using the Chart.js library?
这是用图表表示的可能性吗?js库?
EDIT: Fiirst of all i am showing the complete array on the chart. After clicking a button, i will have the subarray displayed. Any ideas of to do so?
编辑:首先,我要在图表上显示完整的数组。单击按钮后,将显示子数组。有这样做的想法吗?
1 个解决方案
#1
0
The easiest way would be to just destroy the chart (using the chart variable) and construct a new chart using the new data.
最简单的方法是销毁图表(使用图表变量),并使用新的数据构造一个新的图表。
For instance, if you already have constructed it using
例如,如果您已经使用它构造了它
...
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx).Bar(data);
You need to destroy it first using
你需要先毁掉它
myChart.destroy();
and then make the new chart
然后制作新的图表
myChart = new Chart(ctx).Bar(newData);
where newData
is the new data object.
newData是新的数据对象。
You could also update the old data object (if you are not using it for anything else) instead of using a new object, like so
您还可以更新旧的数据对象(如果您不将其用于任何其他用途),而不是使用新的对象,如so
data.labels = [5, 6, 7, 8, 9];
data.datasets[0].data = [5, 6, 7, 8, 9];
myChart.destroy();
myChart = new Chart(ctx).Bar(data);
Fiddle - http://jsfiddle.net/5u3ahg7L/
小提琴——http://jsfiddle.net/5u3ahg7L/
(the chart updates with the new data after a 2 second delay, you don't need the setTimeout wrapper - it's just for demonstration)
(图表在延迟2秒后更新新数据,您不需要setTimeout包装器——它只是为了演示)
You could also do this using the prototype methods .update()
and .removeData()
(http://www.chartjs.org/docs/#line-chart-prototype-methods for Line chart methods - each type has the similar methods) but since your changes require you to remove data from both ends of the graph, .destroy()
would be an easier option.
您还可以使用prototype方法.update()和. removedata () (http://www.chartjs.org/docs/# Line -chart-prototype-methods for Line chart方法——每种类型都有类似的方法)来实现这一点。
#1
0
The easiest way would be to just destroy the chart (using the chart variable) and construct a new chart using the new data.
最简单的方法是销毁图表(使用图表变量),并使用新的数据构造一个新的图表。
For instance, if you already have constructed it using
例如,如果您已经使用它构造了它
...
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx).Bar(data);
You need to destroy it first using
你需要先毁掉它
myChart.destroy();
and then make the new chart
然后制作新的图表
myChart = new Chart(ctx).Bar(newData);
where newData
is the new data object.
newData是新的数据对象。
You could also update the old data object (if you are not using it for anything else) instead of using a new object, like so
您还可以更新旧的数据对象(如果您不将其用于任何其他用途),而不是使用新的对象,如so
data.labels = [5, 6, 7, 8, 9];
data.datasets[0].data = [5, 6, 7, 8, 9];
myChart.destroy();
myChart = new Chart(ctx).Bar(data);
Fiddle - http://jsfiddle.net/5u3ahg7L/
小提琴——http://jsfiddle.net/5u3ahg7L/
(the chart updates with the new data after a 2 second delay, you don't need the setTimeout wrapper - it's just for demonstration)
(图表在延迟2秒后更新新数据,您不需要setTimeout包装器——它只是为了演示)
You could also do this using the prototype methods .update()
and .removeData()
(http://www.chartjs.org/docs/#line-chart-prototype-methods for Line chart methods - each type has the similar methods) but since your changes require you to remove data from both ends of the graph, .destroy()
would be an easier option.
您还可以使用prototype方法.update()和. removedata () (http://www.chartjs.org/docs/# Line -chart-prototype-methods for Line chart方法——每种类型都有类似的方法)来实现这一点。