在 Chart.js 折线图中突出显示日期

Question

我想添加一个标记以使用 Chart.js 突出显示特定日期，我目前可以使用特定索引号来做到这一点。在下面的代码中，我可以突出显示 2020-11-17 的点，但只能使用索引 300，而不是参考具体日期。

使用 customRadius 函数我可以与图表数据交互，但不幸的是日期信息似乎在这个阶段被删除了。尽管如此，图表本身通过使用标签（特别是 X 轴）来记录日期

如何将索引号与标签值相关联？

console.log(context.data.labels);

Returns 一个错误

const but = document.getElementById('myButton');

function customRadius(context)
  { 
    let index = context.dataIndex;
    let value = context.dataset.data[ index ];
    return index === 300 || value >= 1000000 ?
           10 :
           2;
  }

but.addEventListener('click',function() {
    let dates = [];
    let confirmed = [];
    let recovered = [];
    let deaths = [];

    fetch("https://pomber.github.io/covid19/timeseries.json")
    .then(response => response.json())
    .then(data=> {
        data["South Africa"].forEach(o => {
        dates.push(o.date);
        confirmed.push(o.confirmed);
        recovered.push(o.recovered);
        deaths.push(o.deaths);
        })
        new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'Confirmed',
                borderColor: 'orange',
                backgroundColor: 'orange',
                fill: 'false',
                data: confirmed
            },
            {
                label: 'Recovered',
                borderColor: 'green',
                backgroundColor: 'green',
                fill: 'false',
                data: recovered
            },
            {
                label: 'Deaths',
                borderColor: 'red',
                backgroundColor: 'red',
                fill: 'false',
                data: deaths
            }
            ]
        },
        options: {
            responsive: true,
                animation: {
                duration:0
                },
            elements: {
                point: {
                    radius : customRadius,
                    display: true
                }
            },                 
            title: {
            display: true,
            text: 'Covid-19 / South Africa'
            }
        }
        });
    });

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>
<body>
<button type="button" id="myButton">Click me</button>

<canvas id="myChart" height="100"></canvas>
</body>
</html>

Answer 1

您可以访问标签所在的图表实例本身，将您的函数更改为此将允许您访问日期：

function customRadius(context) {
  let index = context.dataIndex;
  let value = context.dataset.data[index];
  const label = context.chart.data.labels[index]
  console.log(label)
  return index === 300 || value >= 1000000 ?
    10 :
    2;
}

实时样本：

const but = document.getElementById('myButton');

function customRadius(context) {
  let index = context.dataIndex;
  let value = context.dataset.data[index];
  const label = context.chart.data.labels[index]
  // console.log(label)
  return label === '2020-11-17' ?
    10 :
    2;
}

but.addEventListener('click', function() {
  let dates = [];
  let confirmed = [];
  let recovered = [];
  let deaths = [];

  fetch("https://pomber.github.io/covid19/timeseries.json")
    .then(response => response.json())
    .then(data => {
      data["South Africa"].forEach(o => {
        dates.push(o.date);
        confirmed.push(o.confirmed);
        recovered.push(o.recovered);
        deaths.push(o.deaths);
      })
      new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
          labels: dates,
          datasets: [{
              label: 'Confirmed',
              borderColor: 'orange',
              backgroundColor: 'orange',
              fill: 'false',
              data: confirmed
            },
            {
              label: 'Recovered',
              borderColor: 'green',
              backgroundColor: 'green',
              fill: 'false',
              data: recovered
            },
            {
              label: 'Deaths',
              borderColor: 'red',
              backgroundColor: 'red',
              fill: 'false',
              data: deaths
            }
          ]
        },
        options: {
          responsive: true,
          animation: {
            duration: 0
          },
          elements: {
            point: {
              radius: customRadius,
              display: true
            }
          },
          title: {
            display: true,
            text: 'Covid-19 / South Africa'
          }
        }
      });
    });

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>

<body>
  <button type="button" id="myButton">Click me</button>

  <canvas id="myChart" height="100"></canvas>
</body>

</html>

在 Chart.js 折线图中突出显示日期

Highlight date in Chart.js line graph

javascript

chart.js