Question

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

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

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

Answer 1

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

const chartData = {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  datasets: [
    /*
    {
      label: "Set 1",
      data: [10, 20, null, 40, 30, null, 20, 40],
      borderColor: "#F00",
      fill: false,
      steppedLine: false,
      tension: 0,
      fillBetweenSet: 1,
      fillBetweenColor: "rgba(255,0,0, 0.2)"
    },
    {
      label: "Set 2",
      data: [60, 40, 10, 50, 60, null, 50, 20],
      borderColor: "#00F",
      fill: false,
      steppedLine: false,
      tension: 0.5
    },
    */
    {
      label: "Set 2",
      data: [40, 50, 30, 30, 20, null, 60, 40],
      borderColor: "#0D0",
      fill: false,
      steppedLine: false,
      tension: 0,
      fillBetweenSet: 1,
      fillBetweenColor: "rgba(5,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不正确的绘图

1 个答案: