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

从中读取似乎没有添加与每个数据点关联的永久可见标签的选项

例如，在下面的fiddle中，数据值为：

[{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

包含要为给定点显示的文本数据

小提琴：

小提琴手：

HTML:

更新：

此代码：

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
        }
      }]
    },
  }
});

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

---

更新的fiddle:

当使用最新稳定版本的Chart.js（2.9.3）时，例如可以通过以下方式完成

请在下面查看您的修订代码。请注意，

showAllTooltips

选项允许您为单个图表启用该功能，以防您希望在同一页面上包含具有不同行为的多个图表

Chart.plugins.register({
渲染前：函数（图表）{
if（chart.config.options.showAllTooltips）{
//创建一组工具提示，
//我们无法使用图表工具提示，因为每个图表只有一个工具提示
chart.pluginTooltips=[]；
chart.config.data.datasets.forEach（函数（dataset，i）{
chart.getDatasetMeta（i）.data.forEach（函数（扇区，j）{
chart.pluginTooltips.push（新图表工具提示({
_查特：查特，查特，
_chartInstance:chart，
_数据：图表数据，
_选项：chart.options.tooltips，
_活跃：[行业]
}）；
});
});      
chart.options.tooltips.enabled=false；//关闭常规工具提示
}
},
后拉伸：功能（图表、缓和）{
if（chart.config.options.showAllTooltips）{
如果（！chart.allTooltipsOnce）{
如果（缓和！==1）{
返回；
}
chart.allTooltipsOnce=true；
}
chart.options.tooltips.enabled=true；
Chart.helpers.each（Chart.pluginTooltips，函数（工具提示）{
tooltip.initialize（）；
tooltip.update（）；
tooltip.pivot（）；
工具提示.transition（缓和）.draw（）；
});
chart.options.tooltips.enabled=false；
}
}
});
var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[“T”、“A”、“s”、“SDF”]，
数据集：[
{
标签：“测试”，
数据：[{x:1，y:2}，{x:2，y:4}，{x:3，y:8}，{x:4，y:16}]，
秀行：没错，
填充：假，
边框颜色：“rgba（0，200，0，1）”
}
]
},
选项：{
showAllTooltips:true，
悬停：{
模式：“最近的”，
交集：对
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
}
});


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
        }
      }]
    },
  }
});