Question

enter image description here我想突出显示chartjs中的特定点，并且希望在chart js中的数据点处有x和y轴截距。

点（753.17,126.52）应该用标记高亮显示，折线图中其余点不应高亮显示。

下面是我要如下创建图表的图像。

(app.quizcomplete)

Answer 1

我已经用 Chart.js版本2.8.0 测试了一种可能的解决方案。它基于Scriptable Options，并且基于出色的示例，您可以找到here。

下面的示例是一个简化的可执行html / js代码，您可以通过运行其代码段（代码下方的按钮）进行测试。

关键是行radius : customRadius,，其中 customRadius 引用了代码中的function customRadius( context )。这是因为半径是Scriptable Options。

该函数告诉应用程序在索引为3（标签为“ d”）或值等于或大于8时使半径等于10。

let ctx = document.getElementById( 'actual_chart' );
  new Chart(
    ctx,
    {
      type   : 'line',
      data   : {
        labels  : [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' ],
        datasets: [
          {
            data: [ 0, 1, 1, 2, 3, 5, 8, 13 ]
          }
        ]
      },
      options: {
        legend  : {
          display: false
        },
        elements: {
          point: {
            radius : customRadius,
            display: true
          }
        }
      }
    } );

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

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>55468483</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
</head>

<body>
  <canvas id="actual_chart"></canvas>
</body>

</html>

结果图表如下：

您可以在此答案的第一段中找到有关参考文献的更多详细信息。

请让我们知道是否有帮助。

突出显示图表JS中的特定点

1 个答案: