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

我想突出显示chartjs中的一个特定点，我想截取chartjs中数据点的x轴和y轴

该点（753.17126.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>

window.onload=函数displayLineChart（）{
风险值数据={
标签：[669.42669.427735.618753.170801.809]，
数据集：[
{
填充颜色：“rgb（255255）”，
strokeColor:“rgb（0,0128,1.0）”，
点颜色：“rgba（176196222）”，
边框颜色：“浅绿色”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[0.00,50,100,126.52,200]
},
]
};
var ctx=document.getElementById（“线形图”）.getContext（“2d”）；
变量选项={
比例：{
滴答声：{
显示：假
}
}
};
var折线图=新图表（ctx）.Line（数据{
//布尔值-如果我们在图表数据上方显示比例
scaleOverlay:false，
//布尔值-如果我们想用硬编码的比例覆盖
scaleOverride:错误，
//**如果scaleOverride为真，则需要此选项**
//数字-硬编码刻度中的步数
scaleSteps:null，
//数字-硬编码刻度中的值跳转
ScaleStrepWidth:null，
//数字-刻度起始值
scaleStartValue:null，
//字符串-刻度线的颜色
刻度颜色：“rgba（0,0,0,1）”，
//数字-缩放线的像素宽度
标度宽度：2，
//布尔值-是否在比例上显示标签
scaleShowLabels:false，
//插入JS字符串-可以访问值
scaleLabel:“”，
//字符串-缩放标签的缩放标签字体声明
scaleFontFamily:“Arial”，
//数字-缩放标签字体大小（以像素为单位）
scaleFontSize:12，
//字符串-缩放标签字体重量样式
scaleFontStyle:“正常”，
//字符串-缩放标签字体颜色
scaleFontColor:#666“，
///布尔值-是否在图表中显示网格线
scaleShowGridLines:false，
//字符串-网格线的颜色
scaleGridLineColor:“rgba（0,0,0,05）”，
//Number—网格线的宽度
scaleGridLineWidth:1，
//布尔-点之间的直线是否弯曲
贝塞尔曲线：对，
//布尔值-是否为每个点显示点
是的，
//Number-每个点的半径（以像素为单位）
点半径：5，
//数字-点-点笔划的像素宽度
pointDotStrokeWidth:1，
//布尔值-是否显示数据集的笔划
datasetStroke：对，
//数字-数据集笔划的像素宽度
datasetStrokeWidth:2，
//布尔值-是否用颜色填充数据集
datasetFill:true，
//布尔值-是否为图表设置动画
动画：没错，
//Number-动画步骤数
动画步骤：60，
//字符串动画效果
动画化：“easeOutQuart”，
//函数-动画完成时激发
onAnimationComplete:null
});
lineChart.defaults.scale.gridLines.display
=假；
}

我已经用Chart.js 2.8.0版测试了一个可能的解决方案。这是基于它和你能找到的极好的样品

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

关键是行

radius:customRadius，

，其中customRadius指的是

函数customRadius（context）

，该函数也在代码中。这是因为半径是一个

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

让ctx=document.getElementById（'actual_chart'）；
新图表(
ctx，
{
键入：“行”，
数据：{
标签：['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h']，
数据集：[
{
数据：[0,1,1,2,3,5,8,13]
}
]
},
选项：{
图例：{
显示：假
},
要素：{
要点：{
半径：自定义半径，
显示：真
}
}
}
} );
函数customRadius（上下文）
{
让index=context.dataIndex；
让value=context.dataset.data[index]；
返回索引===3 | |值>=8？
10 :
2.
}

55468483