图表中的线上的绘图点

Question

我正在使用Chart.js绘制简单的线图。我想在我的线上显示红色的点。例如，我已将数组作为1到100的数字数据集传递。我想显示红色的点。这是否可以在图表中。

我知道我可以浏览该数组并从该数组中取出均匀值，然后将该数组传递到数据集。您能在这方面提供帮助吗？这是我的数据集代码

这是我的数据集

datasets: [
        {
            label: 'Assay Values',
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderWidth: 1,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: data.assay_value,
            spanGaps: false
        },

data.ashay_values是包含数组的数组。

任何类型的帮助都将不胜感激

Answer 1

假设data.assay_values包含数量数字（例如[65, 59, 80, 81, 56, 55, 40]），并且您只希望图表显示偶数值，您可以使用以下代码将数据数组处理为新数组，仅保留均匀的数字。

请记住，您还必须构建一个新的labels数组，因为您的数据集数据阵列必须与图表标签相同（因为数据映射中的每个索引to相应的标签索引）。

请注意，由于您在问题中没有提供有关labels数组的任何详细信息，因此该代码假定您的数组称为labels，其中包含一系列字符串。您需要根据您在实施中定义标签的方式进行更改。

var evenData = [];
var newLabels = [];
data.assay_values.forEach(function(e, i) {
  // only take the even values
  if (e % 2 === 0) {
    evenData.push(e);
    newLabels.push(labels[i]);
  }
});

然后更改您的图表。

var data = {
  labels: newLabels,
  datasets: [{
    label: 'Assay Values',
    fill: false,
    lineTension: 0,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderWidth: 1,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 1,
    pointHitRadius: 10,
    data: evenData,
    spanGaps: false
  }]
};
// configure your chart options here
var options = {};
// ctx is a jQuery instance or 2d context of the canvas of where we want to draw the chart.
var myLineChart = new Chart(ctx, {
  type: 'line', 
  data: data, 
  options: options 
});