如何在 React ChartJS 2 的线条图中隐藏一些点？

Question

我想在点本身的值为0时隐藏或改变点的颜色

以前版本的 ChartJS 您可以通过以下代码访问这些点元素：

var myChart = new Chart(ctx).Line(data);
for (var i = 1; i <= data.datasets[0].data.length - 1; i++) 
   if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
      myChart.datasets[0].points[i].display = false;

示例：http://jsfiddle.net/3tok57dL/

我正在使用 chart.js 2.7.0 和 react-chartjs-2 2.6.2，但找不到如何访问这些元素。

谢谢。

Answer 1

您可能想看看 API 方法 getDatasetMeta。

This returned data has all of the metadata that is used to construct the chart.

使用此元数据，您可以将特定点的 radius 设置为零以隐藏它们。

我用下面的 chart.js 2.7.1 复制了你的例子：

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

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My Second dataset",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [0, 0, 0, 0, 0, 10, 10, 10, 10, 10, 19, 86, 27, 90, 28, 48, 40, 19, 86, 27, 90]
  }]
};
var myChart = new Chart(ctx, {
  type: 'line',
  data: data
});

var meta = myChart.getDatasetMeta(0);
for (var i = 1; i <= data.datasets[0].data.length - 1; i++) 
{
   if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
   {     
     meta.data[i]._model.radius = 0;
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>

Answer 2

您可以访问一些应用于点的数据集属性（参见 http://www.chartjs.org/docs/latest/charts/line.html），例如 pointRadius 和 pointBackgroundColor。

检查 fiddle 更新：http://jsfiddle.net/beaver71/79d1bnf2/

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

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My Second dataset",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [0, 0, 0, 0, 0, 10, 10, 10, 10, 10, 19, 86, 27, 90, 28, 48, 40, 19, 86, 27, 90]
  }]
};
var options = {};
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

checkPoints = function(remove) {
  myChart.data.datasets[0].pointBackgroundColor = [];
  myChart.data.datasets[0].pointRadius = [];
  for (var i = 1; i <= data.datasets[0].data.length - 1; i++) {
    if (data.datasets[0].data[i - 1] === data.datasets[0].data[i]) {
      if (remove) {
        myChart.data.datasets[0].pointRadius[i] = 0;
      }
      myChart.data.datasets[0].pointBackgroundColor[i] = 'red';
    } else {
      myChart.data.datasets[0].pointBackgroundColor[i] = 'blue';
    }
  }
  myChart.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>

<button onclick="checkPoints()">check points</button>
<button onclick="checkPoints(1)">check points and remove</button>

<canvas id="myChart" height="300" width="800"></canvas>

如何在 React ChartJS 2 的线条图中隐藏一些点？

How to hide some points inside my line graphic in React ChartJS 2?

javascript

reactjs

chart.js

react-chartjs