ChartJS v2 - 当用户单击多线图的一个点时保持工具提示打开

Question

我使用 chartJS v2。

我尝试在用户单击多折线图的某个点时让工具提示保持打开状态。工具提示必须包含一个横坐标值的每一行的数据。我写了一个 chartJS 插件来做它并且它有效但它只显示一行的数据。

这里是fiddle:

https://jsfiddle.net/bencarbon/jrpLh8pa/

这是插件：

    var keepTooltipOpenPlugin = {

      beforeRender: function(chart) {

    // We are looking for bubble which owns "keepTooltipOpen" parameter.
        var datasets = chart.data.datasets;
        chart.pluginTooltips = [];
        for (i = 0; i < datasets.length; i++) {
          for (j = 0; j < datasets[i].data.length; j++) {
            if (datasets[i].data[j].keepTooltipOpen && !chart.getDatasetMeta(i).hidden) {
            //When we find one, we are pushing all informations to create the tooltip.
              chart.pluginTooltips.push(new Chart.Tooltip({
                _chart: chart.chart,
                _chartInstance: chart,
                _data: chart.data,
                _options: chart.options.tooltips,
                _active: [chart.getDatasetMeta(i).data[j]]
              }, chart));
            }
          }
        }
      }, // end beforeRender

      afterDatasetsDraw: function(chart, easing) {

          // Draw tooltips
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });


        } // end afterDatasetsDraw
    }

    Chart.pluginService.register(keepTooltipOpenPlugin);

我是这样使用的：

function handleClick(evt) {
    var activeElement = myLineChart.getElementAtEvent(evt);
    if(activeElement.length>0){
        var values = myLineChart.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
        if(values.keepTooltipOpen)
            values.keepTooltipOpen = false;
        else
          values.keepTooltipOpen = true;
    }
};

我应该如何修改我的插件以在工具提示中显示每一行的数据？

谢谢

Answer 1

你的问题很有趣，所以我更新了jsfiddle。如果您发现错误，请告诉我：

https://jsfiddle.net/bencarbon/jrpLh8pa/4/

这是新插件：

var keepTooltipOpenPlugin = {

      beforeRender: function(chart) {

    // We are looking for bubble which owns "keepTooltipOpen" parameter.
        var datasets = chart.data.datasets;
        chart.pluginTooltips = [];
    var abscissaToShow = chart.data.keepShowing;
    abscissaToShow.forEach(function(element) {
      var activeArray = [];
      for (i = 0; i < datasets.length; i++) {
        if(!chart.getDatasetMeta(i).hidden)
                activeArray.push(chart.getDatasetMeta(i).data[element])
      }
      chart.pluginTooltips.push(new Chart.Tooltip({
                _chart: chart.chart,
                _chartInstance: chart,
                _data: chart.data,
                _options: chart.options.tooltips,
                _active: activeArray
              }, chart));
    });
}, // end beforeRender

      afterDatasetsDraw: function(chart, easing) {

          // Draw tooltips
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });


        } // end afterDatasetsDraw
    }

    Chart.pluginService.register(keepTooltipOpenPlugin);

Answer 2

您可以只使用事件选项：

chartOptions = {

            events: ["click", "mouseout"],

}

ChartJS v2 - 当用户单击多线图的一个点时保持工具提示打开

ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart

javascript

chart.js

chart.js2