charts - 如何仅显示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>