如何一次显示一张图表？答案

【问题标题】：How to show one chart at a time?如何一次显示一张图表？
【发布时间】：2017-03-19 11:31:50
【问题描述】：

我的代码直到https://jsfiddle.net/sbLgktm2/6/中显示的当前状态

我想一次只显示一个图表。点击下拉item1后，出现一个条形图，如果我点击下拉item2，我想删除为item1绘制的条形图，只为item2绘制条形图。但是，控制台一直为我的 jsfiddle 代码的第 36 行 javascript 返回“未定义数据”，如下所示

var chartData = data[$(currentTarget).data('id')]

希望有人可以与我分享错误所在。通过我的双数组将数据分配给图形应该没有任何问题，因为可以在我添加 js 第 20、31、41-46 行之前绘制图表。

其他信息：我的下拉列表是动态生成的。我的 x 轴和 y 轴数据都会因每个事件而改变。这里使用的是 Bootstrap 3 和 chart.js v2。

【问题讨论】：

【解决方案1】：

doublearrx 和 doublearry 曾经在您的代码中定义过吗？您收到错误是因为您没有从我的example 复制data 数组。

请记住，这个示例只是演示如何实现您所追求的概念（并不是真正能够复制和粘贴，因为您从未共享生成 doublearrx 和 doublearry 数组的代码)。

基本上，您只需要一种方法将每个下拉项映射到可用于生成新数据数组的内容（也许您可以为此使用eventnumber...或者您是否已经采用不同的方式） ?不管是什么，将其存储在每个下拉项目数据属性中。

var li = document.createElement("li");
li.dataset.eventNumber = eventNumber;

然后，在单击（或者您已经在执行此操作）时从选定的下拉项中提取该数据。

var eventNumber = $(e.currentTarget).data('eventNumber');

并使用它来获取新标签和数据（x 和 y 数据）并更新图表。这是关键部分，因为它显示了如何更改图表中的数据。

myChart.data.datasets[0].data = yaxisarr;
myChart.data.labels = xaxisarr
myChart.update();

【讨论】：

哦，嗨，Jordan，出于我的目的，我无法像您那样预定义数据集，因为事件的数量不固定。有时我们可以有 3 个事件，例如在其他 5 个事件。我的 doublearrx 和 doublearry 包含所有事件的数据，并在我的代码中全局定义。基本上对于 doublearrx 或 y，数据被推送到每个相应事件的单个数组中。因此，如果我想要事件 2 的 y 轴数据，我必须访问 yaxisarr = doublearry[2];并使用 yaxisarr 的单个数组绘制我的图表。
好的，那就这样吧，获取您的新数据，如果我的回答更新您的图表，请使用最后一部分。
我做了一些更改，现在可以绘制图表，但它仍然显示两个图表。 jsfiddle.net/sbLgktm2 我觉得我在 jsfiddle 中的 js line 34 有问题。
jsfiddle 对我不起作用。我单击按钮，没有任何反应。我还看到您仍在使用名为chartData 的未定义变量。您是否链接了正确的 jsfiddle？
乔丹，我已经让它工作了。你是对的，一旦我删除了 var= 图表数据并简单地更新图表，就没有更多的重叠了！非常感谢。