Question

仅显示发生变化的数据点。

为了减少混乱，当上一个值或下一个值相同时，我不想显示圆圈。仍然，当您将鼠标悬停在它们上方以显示带有信息的标签时。

这就是我想要的样子：

第二个和第三个圆圈是相同的，它们必须隐藏并且仅在悬停时显示：

Answer 1

您可以使用以下选项设置点的样式...

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>

Answer 2

对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 3

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步：

添加内嵌数组并将其传递给options对象。 使用[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>

如何仅显示Chartjs中发生变化的数据点？

3 个答案: