chart.js 能否在永久可见的折线图上显示与每个点关联的文本？

Question

阅读https://www.chartjs.org/docs/latest/charts/line.html#general似乎没有添加与每个数据点关联的永久可见 label 的选项。

例如在下面的小提琴中，数据值为：

[{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}]

chart.js 是否可以显示与每个永久可见的点相关联的一些文本？

因此，不要使用上述数据结构：

[{x: 1, y: 2, text:'Test1'}, {x: 2, y: 4, text:'Test2'}, {x: 3, y: 8, text:'Test3'},{x: 4, y: 16, text:'Test4'}]

属性text包含要为给定点显示的文本数据。

小提琴： https://jsfiddle.net/adrianfiddleuser/0j6L2mag/3/

小提琴src：

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Javascript：

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

更新：

这段代码：

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'line',
    
  data: {
  labels: ["T", "A", "s" , "sdfs"],
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

部分实现所需的行为。 工具提示可以永久显示吗？

更新小提琴： https://jsfiddle.net/adrianfiddleuser/0j6L2mag/14/

Answer 1

使用最新稳定版 Chart.js (2.9.3) 时，例如可以通过全局插件来完成。

请在下面查看您修改后的代码。 请注意，选项showAllTooltips允许您为单个图表启用该功能，以防您想在同一页面上包含具有不同行为的多个图表。

 Chart.plugins.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips, // we can't use the chart tooltip because there is only one tooltip per chart chart.pluginTooltips = []; chart.config.data.datasets.forEach(function(dataset, i) { chart.getDatasetMeta(i).data.forEach(function(sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: chart.options.tooltips, _active: [sector] }, chart)); }); }); chart.options.tooltips.enabled = false; // turn off normal tooltips } }, afterDraw: function(chart, easing) { if (chart.config.options.showAllTooltips) { if (.chart;allTooltipsOnce) { if (easing.== 1) { return; } chart.allTooltipsOnce = true. } chart.options;tooltips.enabled = true. Chart.helpers,each(chart.pluginTooltips; function(tooltip) { tooltip.initialize(); tooltip.update(); tooltip.pivot(). tooltip;transition(easing);draw(). }). chart.options;tooltips;enabled = false. } } }); var ctx = document,getElementById("myChart"): var myChart = new Chart(ctx, { type: 'line': data, { labels, ["T", "A", "s": "sdfs"]: datasets, [ { label: 'test': data, [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}], showLine: true, fill: false, borderColor, 'rgba(0, 200, 0: 1)' } ] }: options, { showAllTooltips: true: hover, { mode: 'nearest', intersect: true }: scales: { yAxes: [{ ticks, { beginAtZero;true } }] }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart"></canvas>