chartjs - 如何设置不同图表的显示顺序

Question

这里有 3 个不同的数据集。我想在看不到线条的情况下将它们一个接一个地显示。

datasets: [
   {
    data : someData
    borderColor: "#0070C0"
    borderWidth: 3
    barThickness: "flex"
    fill: "origin"
    backgroundColor: "#0070C0"
    order: 4
   }
]

我尝试设置数据集的顺序，如上所示。我仍然得到我在图像中显示的图表。

Answer 1

你可以用borderColor: "rgba(255,255,255,0)"这样的行来隐藏这些行

你不能简单地只隐藏其他区域后面的点，你可以全部隐藏或不隐藏。

这是我测试过的 JSBin：https://jsbin.com/vuyigocexi/2/edit?js,output

顺便说一句，如果您省略 order-property，则使用代码中数据集的顺序。

如果您提供更多信息，我可能会为您提供更好的帮助。

Answer 2

如下定义您的数据集列表：

var data = {
  labels: ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", 
                 "May 7", "May 8", "May 9", "May 10", "May 11", "May 12"],
  datasets: [
    {
      label: "Red",
      fill: true,
      backgroundColor: "rgba(196, 93, 105, 1)",
      data: dataPack2,
    },
    {
      label: "Blue", 
      fill: true, 
      backgroundColor: "rgba(32, 162, 219, 1)",
      data: dataPack1,
    },
  ]
};

您可以通过重新排序数据集列表中的数据对象来更改数据顺序。

var myLineChart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: data
});