Как показать только те точки данных, которые имеют изменения в Chartjs?

Question

Показывать только те точки данных, которые имеют изменения.

Чтобы уменьшить беспорядок, я не хочу показывать круги, когда предыдущее значение или следующее совпадают.Тем не менее, когда вы наводите курсор на них, чтобы показать этикетку с информацией.

Вот как я хочу, чтобы она выглядела:

второй и третий круги одинаковы, они должны быть скрыты и показываться только при наведении:

Answer 1

Немного другой подход к WhiteHat's (ниндзя!), Который повторяет серию с помощью .forEach для создания вариантов цвета:

---

Редактировать: Незначительные изменения if для учета предыдущего и следующего значения при определении видимости решающей точки и добавлены параметры цвета при наведении, чтобы отобразить скрытую точку при наведении.

let labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
  series = [10, 5, 5, 5, 5, 2, 3, 3, 3, 10],
  pointBackgroundColor = [],
  pointBorderColor = [],
  pointHoverBackgroundColor = 'white',
  pointHoverBorderColor = 'red';

series.forEach(
  (value, index) => {
    if (value == series[index - 1] && value == series[index + 1]) {
      pointBackgroundColor.push('transparent');
      pointBorderColor.push('transparent');
    } else {
      pointBackgroundColor.push('white');
      pointBorderColor.push('red');
    }
  });

myChart = new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'series1',
      data: series,
      pointBackgroundColor: pointBackgroundColor,
      pointBorderColor: pointBorderColor,
      pointHoverBackgroundColor: pointHoverBackgroundColor,
      pointHoverBorderColor: pointHoverBorderColor
    }]
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index',
      intersect: false
    },
    hover: {
      intersect: false
    }
  }
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

Answer 2

Раствор WhiteHat хорош, но не дает желаемого эффекта.Когда вы наводите курсор на скрытый круг данных, он должен сделать круг видимым.

Вот как я это сделал

Шаг 1:

В бэкэнде, использующем PHP, япроверьте, отличаются ли предыдущая и следующая точки, и сделал радиус точки 0.

$countPoints = count($points);
for ($i=1; $i < $countPoints-1; $i++) { 
    $prevVal = $chartChange[$i-1];
    $nextVal = $chartChange[$i+1];
    if($chartChange[$i] == $prevVal && $chartChange[$i] == $nextVal){
        $points[$i] = 0;
    }
}

Шаг 2:

Добавьте и передайте развернутый массив объекту параметров. Использование формата [3,0,3,3]

pointRadius: [{/literal}{$points}{literal}]

Редактировать:

Использование только js

        
  let labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
  series = [10, 5, 5, 5, 5, 2, 3, 3, 3, 10],
  pointRadius = [],
  pointBackgroundColor = "rgb(230, 247, 238)",
  pointBorderColor = "rgb(47, 186, 117)";

series.forEach(
  (value, index) => {
    if (value == series[index - 1] && value == series[index + 1]) {
      pointRadius.push(0);
    } else {
      pointRadius.push(4);
    }
  });

myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'series1',
      fill: 'start',
      pointRadius: pointRadius,
      data: series,
      backgroundColor:pointBackgroundColor,
      borderColor:pointBorderColor,
      pointHoverRadius: 4,
      pointBackgroundColor: pointBackgroundColor,
      pointBorderColor: pointBorderColor,
    }]
  },
  options: {
    tooltips: {
            // mode: 'index',
            intersect: false
          },
            tooltips: {
            mode: 'index',
            axis: 'x',
            intersect: false
          },
          hover: {
      intersect: false
    },
    maintainAspectRatio: false
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Answer 3

Вы можете использовать следующие опции для оформления точек ...

pointBackgroundColor, pointBorderColor, pointBorderWidth

, но вместо предоставления одного значения ...

pointBackgroundColor: '#ffffff',
pointBorderColor: 'rgb(102, 187, 106)',
pointBorderWidth: 2,

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

для точек, которые вы не хотите показывать, используйте цвет, такой как 'transparent'.
, при этом точка будет скрыта, но при наведении курсора будет отображаться всплывающая подсказка.

pointBackgroundColor: ['#ffffff', '#ffffff', 'transparent', 'transparent', '#ffffff', '#ffffff'],
pointBorderColor: ['rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'transparent', 'transparent', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)'],
pointBorderWidth: [2, 2, 0, 0, 2, 2]

см. Следующий рабочий фрагмент ...

  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      datasets: [{
        backgroundColor: 'rgba(102, 187, 106, 0.2)',
        borderColor: 'rgb(102, 187, 106)',
        borderWidth: 2,
        data: [5, 6, 6, 6, 6, 7, 6, 6, 5, 4],
        label: 'y',
        lineTension: 0,
        pointBackgroundColor: ['#ffffff', '#ffffff', 'transparent', 'transparent', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
        pointBorderColor: ['rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'transparent', 'transparent', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)'],
        pointBorderWidth: [2, 2, 0, 0, 2, 2, 2, 2, 2, 2]
      }]
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>