Javascript 如何以编程方式激活/突出显示折线图点

我使用的是chart.js2.0beta2，在一个页面上有几个折线图和一个滑块。我想突出显示每个折线图上与滑块位置匹配的数据点（它们都有相同数量的点）。我不知道如何在代码中轻松地激活一个点。谢谢您的提示。

1.x版的解决方案 您应该扩展图表类型并添加自己的方法来选择点。以下代码将根据滑块位置显示每个点的工具提示：

var lineChartData={
“数据集”：[{
“数据”：[
"85",
"87",
"70",
"80",
"78",
"69",
"150",
"93",
"59",
"88"],
“pointStrokeColor”：“fff”，
“填充颜色”：“rgba（2200,0.5）”，
“点颜色”：“rgba（2201）”，
“strokeColor”：“rgba（2201）
}],
“标签”：[
"2013-01-01",
"2013-01-04",
"2013-01-15",
"2013-02-03",
"2013-03-25",
"2013-04-03",
"2013-04-14",
"2013-05-27",
"2013-05-27",
"2013-08-03"],
};
var options={showTooltips:false}；
Chart.types.Line.extend({
名称：“LineAlt”，
highlightPoints:函数（datasetIndex、pointIndexArray）{
var-activePoints=[]；
var points=this.datasets[datasetIndex].points；
用于（点索引阵列中的i）{
if（点[pointIndexArray[i]]）{
按（点[pointIndexArray[i]]）；
}
}
此.showTooltip（活动点）；
}
});
var myLine=new Chart（document.getElementById（“canvas”）.getContext（“2d”））.LineAlt（lineChartData，options）；
var highlight=函数（索引）{
myLine.highlightPoints（0，[索引]）；
}
$（“#滑块”）.滑块({
max:lineChartData.datasets[0].data.length-1，
幻灯片：函数（事件，ui）{突出显示（ui.value）；}，
});

2.0测试版的解决方案
扩展您选择的图表控制器，并触发模拟的单击事件以显示工具提示。下面是一些适用于2.0（）的代码：

首先要感谢JstnPwll给了我很多帮助的惊人答案

ChartJSAPI发生了很大变化，2.0测试版不起作用
在ReactJS和“扩展”协调器的复杂性中，我需要这个
这超出了我的能力范围

这对于Chart.JS 2.9来说更简单
在原点有时是数字有时是物体
所以我明确使用后缀num来澄清用法
简单地称为fireSliderEvent（2,5）

你有一个小提琴设置你的滑块吗？我没有，但基本上我需要的是一种方法，选择一个图表点索引到数据集它的绘图。滑块只生成索引（0-N）。是否可以像Justin在2.0中发布的那样做？我最终为2.0制定了一个替代方法，请参见我的其他答案。这很好，非常感谢。不过，我无法在2.0测试版中使用扩展。构造方法似乎已更改？showTooltip（）在2.0中似乎不再有效。也许您可以使用旧版本？：我真的没有时间深入研究2.0的源代码，看起来它们改变了很多。我需要2.0中的功能，但我感谢您发布1.x版本的解决方案。2.0看起来完全不同，所以我希望其中一个贡献者会接受这个。这很酷。我希望这个图表能够在本地支持set by index方法，但我想这就是基于画布的图表的本质。
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(220,220,220,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(220,220,220,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(220,220,220,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            tension: 0.1,
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fill: true,
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(220,220,220,1)",
            pointBorderColor: "rgba(220,220,220,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(220,220,220,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var options = {
    responsive: false
};

Chart.helpers.extend(Chart.controllers.line.prototype, {
    fireSliderEvent: function(point, canvas, boundingRect){
        var mouseX = Math.round((boundingRect.left + point._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / this.chart.chart.currentDevicePixelRatio);
        var mouseY = Math.round((boundingRect.top + point._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / this.chart.chart.currentDevicePixelRatio);
        var oEvent = document.createEvent('MouseEvents');
        oEvent.initMouseEvent('click', true, true, document.defaultView,
            0, mouseX, mouseY, mouseX, mouseY,
            false, false, false, false, 0, canvas);
        canvas.dispatchEvent(oEvent);
    },
    highlightPoints: function(point){
        var canvas = this.chart.chart.canvas;
        var boundingRect = canvas.getBoundingClientRect();
        var points = this.getDataset().metaData;
        this.fireSliderEvent(points[point], canvas, boundingRect);
    }
});

var ctx = $("#canvas");
var myLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

var highlight = function(dataset, point){
    myLine.data.datasets[dataset].controller.highlightPoints(point);
}

$("#slider").slider({
    max: myLine.data.datasets[0].data.length-1,
    slide: function( event, ui ) { highlight(0, ui.value); }
});

fireSliderEvent = (datasetnum,pointnum)=>{

  let myLine=this.chartRef.current.chartInstance;
  //console.log(JSON.stringify(JSON.decycle(this.chartRef.current),null,2));

  var canvas = myLine.canvas;
  var boundingRect = canvas.getBoundingClientRect();

  var meta = myLine.getDatasetMeta(datasetnum);

  // https://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript
  var mouseX = Math.round((boundingRect.left + meta.dataset._children[pointnum]._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / myLine.currentDevicePixelRatio);
  
  var mouseY = Math.round((boundingRect.top + meta.dataset._children[pointnum]._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / myLine.currentDevicePixelRatio);

  var oEvent = document.createEvent('MouseEvents');

  oEvent.initMouseEvent('click', true, true, document.defaultView,
         0, mouseX, mouseY, mouseX, mouseY,
         false, false, false, false, 0, canvas);

  canvas.dispatchEvent(oEvent);
}