时间戳

首页 > 解决方案 > 在一张图中绘制多个折线图时，ChartJS 绘图不正确

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

问题描述

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

小提琴示例：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
});

在此处输入图像描述

在此处输入图像描述

标签： javascriptchart.jslinechart

解决方案

我按照您的指示注释掉了前两个数据集。结果对我来说看起来不错。

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++) {
   ...
}

推荐阅读