Диаграмма JS неверный график при построении нескольких линейных графиков на одном графике - PullRequest
Новая
       24

Диаграмма JS неверный график при построении нескольких линейных графиков на одном графике

0 голосов
/ 19 марта 2020

Я пытаюсь построить несколько графиков на графике, и у меня есть переключатель, чтобы отключить / включить некоторые из графиков. Я уничтожаю / обновляю всякий раз, когда требуется, но когда я вижу отдельный график отдельно, я вижу другой график, но когда он представляет собой смешанный график, линия показывает другой график.

Пример скрипта: 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
});

enter image description here

enter image description here

1 Ответ

0 голосов
/ 21 марта 2020

Я следовал вашим инструкциям и прокомментировал первые два набора данных. Результат выглядит хорошо для меня. 

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 l oop, добавив datasets.length > 1 следующим образом. 

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