在一张图中绘制多个折线图时，ChartJS不正确的绘图

2024-06-02 • 问答

我正在尝试在一个图形上绘制多个折线图，并且有一个切换开关来禁用/启用某些绘图。我会在需要时销毁/更新，但是当我分别看到一个特定的图时，我可以看到一个不同的图，但是当它是混合图形时，该线会显示一个不同的图。

小提琴示例：https://jsfiddle.net/njmr15w9/（您可以尝试注释数据集数组中的前两个图，并且可以看到绿色图如何变化并显示不正确的点，但实际情况并非如此）

    labels: [1,2,3,4,5,6,7,8],datasets: [
      {
          label: "Set 1",data: [10,20,null,40,30,40],borderColor: "#F00",fill: false,steppedLine: false,tension: 0,fillBetweenSet: 1,fillBetweenColor: "rgba(255,0.2)"
      },{
          label: "Set 2",data: [60,10,50,60,20],borderColor: "#00F",tension: 0.5
      },data: [40,borderColor: "#0D0",fillBetweenColor: "rgba(5,255,0.2)"
      }
    ]
};

var chartOptions = {
    responsive: true,title: {
        display: true,text: 'Demo Fill between lines'
    }
};

var chartDemo = new Chart($('#demo').get(0),{
    type: 'line',data: chartData,options: chartOptions
});

我按照您的指示进行了操作，并注释了前两个数据集。结果对我来说很好。

const chartData = {
  labels: [1,2,3,4,5,6,7,8],datasets: [
    /*
    {
      label: "Set 1",data: [10,20,null,40,30,40],borderColor: "#F00",fill: false,steppedLine: false,tension: 0,fillBetweenSet: 1,fillBetweenColor: "rgba(255,0.2)"
    },{
      label: "Set 2",data: [60,10,50,60,20],borderColor: "#00F",tension: 0.5
    },*/
    {
      label: "Set 2",data: [40,borderColor: "#0D0",fillBetweenColor: "rgba(5,255,0.2)"
    }
  ]
};

var chartOptions = {
  responsive: true,title: {
    display: true,text: 'Demo Fill between lines'
  }
};

var chartDemo = new Chart(document.getElementById('demo'),{
  type: 'line',data: chartData,options: chartOptions
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="demo" height="90"></canvas>

更新

问题出在fillBetweenLinesPlugin上，当仅画一条线时，它根本无法正常工作。可以通过如下添加for来更改datasets.length > 1循环中的条件来轻松解决此问题。

for (var d = 0; datasets.length > 1 && d < datasets.length; d++) {
   ...
}

在一张图中绘制多个折线图时，ChartJS不正确的绘图

huangchunliu 回答：在一张图中绘制多个折线图时，ChartJS不正确的绘图

大家都在问