设置要在Chart js中显示的数组

时间:2015-08-28 10:06:05

标签: javascript arrays charts chart.js

例如我有数组[1,2,3,4,5,6,7,8,9,10,11,12,13],我只想显示子阵列[5,6,7] ,8,9]。

这是否可以使用Chart.js库?

编辑:首先,我在图表上显示完整的数组。单击按钮后,我将显示子阵列。有没有这样做的想法?

1 个答案:

答案 0 :(得分:0)

最简单的方法是破坏图表(使用图表变量)并使用新数据构建新图表。

例如,如果您已经使用

构建了它
...
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx).Bar(data);

您需要先使用

销毁它
myChart.destroy();

然后制作新图表

myChart = new Chart(ctx).Bar(newData);

其中newData是新数据对象。

你也可以更新旧的数据对象(如果你没有使用它),而不是使用新的对象,如下所示

data.labels = [5, 6, 7, 8, 9]; 
data.datasets[0].data = [5, 6, 7, 8, 9]; 
myChart.destroy();
myChart = new Chart(ctx).Bar(data);

小提琴 - http://jsfiddle.net/5u3ahg7L/

(图表在延迟2秒后更新新数据,您不需要setTimeout包装器 - 它只是用于演示)

您也可以使用原型方法.update().removeData()http://www.chartjs.org/docs/#line-chart-prototype-methods进行折线图方法 - 每种类型都有类似的方法),但由于您的更改需要您删除数据从图的两端开始,.destroy()将是一个更容易的选择。