Question

我在一个项目上使用ChartJS来绘制折线图，该折线图有5个不同的线条/标签。

默认情况下，ChartJS会同时绘制所有线条，您可以单击它们的每个标签来停用它们。我想反其道而行之，但我还没有办法做到这一点。

  canvas = document.getElementById("graph_currency")
  ctx = canvas.getContext("2d")

  graph_currency = {
    labels: ["Pon", "Wt", "Sro", "Czw", "Pt", "Sb", "Nd"],
    datasets: [
      {
        label: "Placeholder label, will remove",
        backgroundColor: "rgba(88, 234, 245, 0.4)",
        strokeColor: "#76e5f2",
        pointColor: "#103e58",
        borderColor: "rgba(75,192,192,1)",
        pointBorderColor: "#103e58",
        pointBackgroundColor: "#103e58",
        pointRadius: 10,
        pointHoverRadius: 8,
        pointHoverBorderWidth: 2,
        pointHoverBackgroundColor: "rgba(220,220,220,1)",
        pointHoverBorderColor: "#103e58",
        data: [4.7000, 4.5600, 4.8110, 4.9000, 4.9890, 4.8292, 4.68690]
      },
        {
          label: 'GBP',
          backgroundColor: "rgba(88, 234, 245, 0.4)",
          strokeColor: "#76e5f2",
          borderColor: "rgba(75,192,192,1)",
          pointBorderColor: "#103e58",
          pointBackgroundColor: "#103e58",
          pointRadius: 10,
          pointHitRadius: 10,
          pointHoverRadius: 8,
          pointHoverBorderWidth: 2,
          pointHoverBackgroundColor: "rgba(220,220,220,1)",
          pointHoverBorderColor: "#103e58",
          data: [4.5600, 4.5600, 4.8110, 4.9000, 4.7000, 4.68920, 4.68690] 
        },
         {
          label: 'CHF',
          backgroundColor: "rgba(88, 234, 245, 0.4)",
          strokeColor: "#76e5f2",
          borderColor: "rgba(75,192,192,1)",
          pointBorderColor: "#103e58",
          pointBackgroundColor: "#103e58",
          pointRadius: 10,
          pointHitRadius: 10,
          pointHoverRadius: 8,
          pointHoverBorderWidth: 2,
          pointHoverBackgroundColor: "rgba(220,220,220,1)",
          pointHoverBorderColor: "#103e58",
          data: [4.9000, 4.5600, 4.81100, 4.80000, 4.70000, 4.68920, 4.68690] 
        }
    ]
  }
  myNewChart = new Chart(ctx, {type: "line", data: graph_currency,})

这是我当前图表的代码。 http://jsfiddle.net/9aqjq4zL/ - 这是一个有效的JSfiddle和我正在讨论的例子。绘制图表，一行显示所有行，如果单击顶部标签，相应的行将消失。

我的问题是：是否可以改为一次只显示一行，并且点击标签的操作只选择要显示的那一行？

提前谢谢。

（这似乎可能有答案，但它适用于角度ChartJS，所以我无法应用它。 https://github.com/jtblin/angular-chart.js/issues/70）

如何使用ChartJS一次只显示一个标签/行

0 个答案: