Chart.js:点击图例隐藏系列

Question

我正在开发一个使用chart.js(www.chartjs.org)的网站.

我必须制作一个显示多个数据系列的折线图,用户可以通过单击相应的图例符号来隐藏或显示(类似于此http://js.syncfusion.com/demos/web/#!/azure/图表/线图).

有没有办法用chartjs做到这一点？

Answer 1

您可以尝试
为隐藏数据集创建商店

window.chartName = new Chart(...

window.chartName.store = new Array();

然后使用此功能更新图表,必须通过单击图例项来处理

function updateDataset(legendLi, chart, label) {
      var store = chart.store;
      var exists = false;
      for (var i = 0; i < store.length; i++) {
        if (store[i][0] === label) {
          exists = true;
          chart.datasets.push(store.splice(i, 1)[0][1]);
          legendLi.fadeTo("slow", 1);
        }
      }
      if (!exists) {
        for (var i = 0; i < chart.datasets.length; i++) {
          if (chart.datasets[i].label === label) {
            chart.store.push([label, chart.datasets.splice(i, 1)[0]]);
            legendLi.fadeTo("slow", 0.33);
          }
        }
      }
      chart.update();
    }

不要忘记图表选项中更新的图例模板

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName, '<%=datasets[i].label%>')\"><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

不久,我为li组件添加了这个onclick处理程序

<li class=\"legend-item\" onclick=\"updateDataset($(this), window.chartName , '<%=datasets[i].label%>')\"><

例如小提琴

Answer 2

我没有找到办法做到这一点。在图例模板上添加一些 onclick 行为很容易，并且您可以轻松地将系列描边和颜色 Alpha 通道更改为 0，以便区域和描边消失，但我发现无法在点上执行此操作。

我决定对这个特定的图表使用 google 图表，并在不需要该行为时使用 Chart.js，希望 Chart.js 的优秀创建者将来添加它。