chart.js - 突出显示图表 JS 中的特定点

Question

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

点 (753.17,126.52) 应使用标记高亮显示，而该点的其余部分不应在折线图中高亮显示。

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

<apex:page >
  <apex:includeScript value="{!$Resource.Chartjs}"/>
  <script language="JavaScript">
   window.onload = function displayLineChart() {
    var data = {
        labels: [669.426, 669.427,735.618,753.170,801.809],
        datasets: [
            {

                fillColor: "rgb(255,255,255)",
                strokeColor: "rgb(0,0,128,1.0)",
                pointColor: "rgba(176,196,222)",
                borderColor: "lightgreen",



                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [0.00, 50, 100, 126.52, 200]
            },

        ]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = { 

            scale: {
   ticks: {
      display: false
   }
}
            };
    var lineChart = new Chart(ctx).Line(data, {

    //Boolean - If we show the scale above the chart data           
    scaleOverlay : false,

    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,

    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,

    //String - Colour of the scale line 
    scaleLineColor : "rgba(0,0,0,.1)",

    //Number - Pixel width of the scale line    
    scaleLineWidth : 2,

    //Boolean - Whether to show labels on the scale 
    scaleShowLabels : false,

    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",

    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",

    //Number - Scale label font size in pixels  
    scaleFontSize : 12,

    //String - Scale label font weight style    
    scaleFontStyle : "normal",

    //String - Scale label font colour  
    scaleFontColor : "#666",    

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : false,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1, 

    //Boolean - Whether the line is curved between points
    bezierCurve : true,

    //Boolean - Whether to show a dot for each point
    pointDot : true,

    //Number - Radius of each point dot in pixels
    pointDotRadius : 5,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,

    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,

    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null

});
      lineChart.defaults.scale.gridLines.display 


            = false;

  }
</script>
    <div class="box">
    <canvas id="lineChart" height="500" width="600"></canvas>
  </div>

</apex:page>

Answer 1

我已经用 测试了一种可能的解决方案Chart.js 版本 2.8.0 .它基于它的 Scriptable Option在优秀的 sample 上，您可以找到 here .
下面的示例是一个简化且可执行的 html/js 代码，您可以通过运行其代码段(代码下方的按钮)进行测试。
关键是线路radius : customRadius, ，其中 自定义半径 指的是function customRadius( context )这也在代码中。那是因为半径 是 Scriptable Option .
该函数告诉应用程序在索引为 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>

结果图表是这样的:

您可以在此答案的第一段中找到有关引用资料的更多详细信息。
请让我们知道它是否有帮助。