如何忽略ChartJ上的相同值？

Question

我有一个怪异的问题要解决。当chartjs数据数组上存在重复值时，我想忽略它们（不删除）。因为如果删除它们或将其设​​置为null，那么它们似乎并不理想。这是下面的内容。我要实现的目标

data: [500, 500,    2424,   2424,   4111, 4111, 80, 5555,   5555, 6811]

当下一个值重复时，则应该在下一个和上一个值之间。我无法弄清楚，也不知道从哪里开始。

此处为代码笔：https://codepen.io/Cicek96/pen/OJyevXb

var ctx = document.getElementById("myChart").getContext('2d');


var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Tokyo",	"Mumbai",	"Mexico City",	"Shanghai",	"Sao Paulo",	"New York",	"Karachi","Buenos Aires",	"Delhi","Moscow"],
        datasets: [{
            label: 'Series 1', // Name the series
            data: [500,	500,	2424,	2424,	4111, 4111,	80,	5555,	5555, 6811], // Specify the data values array
            fill: false,
            borderColor: '#2196f3', // Add custom color border (Line)
            backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
            borderWidth: 1 // Specify bar border width
        }]},
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
    }
});

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

Answer 1

空虚假并使用spanGaps：true使其覆盖虚假

var ctx = document.getElementById("myChart").getContext('2d');
function factorData(data) {
   let _data = data.map((e, i, a) => {
      let prev = a[i - 1];
      if (e === prev) return '' + e;
      return e;
   }).map(e => typeof e === 'string' ? null : e);
   return _data;
}

console.log(factorData([500,	500,	2424,	2424,	4111, 4111,	80,	5555,	5555, 6811]))

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Tokyo",	"Mumbai",	"Mexico City",	"Shanghai",	"Sao Paulo",	"New York",	"Karachi","Buenos Aires",	"Delhi","Moscow"],
        datasets: [{ spanGaps: true,
            label: 'Series 1', // Name the series
            data: factorData([500,	500,	2424,	2424,	4111, 4111,	80,	5555,	5555, 6811]), // Specify the data values array
            fill: false,
            borderColor: '#2196f3', // Add custom color border (Line)
            backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
            borderWidth: 1 // Specify bar border width
        }]},
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
    }
});

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