ChartJS 如何将自定义文本添加到charts.js中的工具提示

bvn4nwqk  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(253)

我目前正在摆弄一些图表,我希望有一个字符串的文本出现,因为你悬停在某些数据点。
例如,目前我的数据集如下所示:

  1. var data = {
  2. labels: ["January", "February:", "March", "April", "May", "June", "July"],
  3. datasets: [{
  4. label: "My first dataset",
  5. fillColor: "rgba(220,220,220,0.2)",
  6. strokeColor: "rgba(220,220,220,1)",
  7. pointColor: "rgba(220,220,220,1)",
  8. pointStrokeColor: "#fff",
  9. pointHighlightFill: "#fff",
  10. pointHighlightStroke: "rgba(220,220,220,1)",
  11. data: [65, 59, 80, 81, 56, 55, 40]
  12. }]
  13. };

我想举个例子,在二月上空盘旋:59点,并显示“二月:第59节-第59章
谢谢你

svgewumm

svgewumm1#

首先在html中添加此内容

  1. <canvas id="myChart" width="400" height="200"></canvas>
  2. <div id="chartjs-tooltip"></div>

:js

  1. var data = {
  2. labels: ["January", "February", "March", "April", "May", "June", "July"],
  3. datasets: [{
  4. label: "My First dataset",
  5. fillColor: "rgba(220,220,220,0.2)",
  6. strokeColor: "rgba(220,220,220,1)",
  7. pointColor: "rgba(220,220,220,1)",
  8. pointStrokeColor: "#fff",
  9. pointHighlightFill: "#fff",
  10. pointHighlightStroke: "rgba(220,220,220,1)",
  11. data: [65, 59, 80, 81, 56, 55, 40]
  12. }]
  13. };
  14. var myLineChart = new Chart(ctx).Line(data, {
  15. customTooltips: function (tooltip) {
  16. var tooltipEl = $('#chartjs-tooltip');
  17. if (!tooltip) {
  18. tooltipEl.css({
  19. opacity: 0
  20. });
  21. return;
  22. }
  23. tooltipEl.removeClass('above below');
  24. tooltipEl.addClass(tooltip.yAlign);
  25. // split out the label and value and make your own tooltip here
  26. var parts = tooltip.text.split(":");
  27. var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
  28. tooltipEl.html(innerHtml);
  29. tooltipEl.css({
  30. opacity: 1,
  31. left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
  32. top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
  33. fontFamily: tooltip.fontFamily,
  34. fontSize: tooltip.fontSize,
  35. fontStyle: tooltip.fontStyle,
  36. });
  37. }
  38. });

还有一些造型的东西
:css

  1. # chartjs-tooltip {
  2. opacity: 0;
  3. position: absolute;
  4. background: rgba(0, 0, 0, .7);
  5. color: white;
  6. padding: 3px;
  7. border-radius: 3px;
  8. -webkit-transition: all .1s ease;
  9. transition: all .1s ease;
  10. pointer-events: none;
  11. -webkit-transform: translate(-50%, 0);
  12. transform: translate(-50%, 0);
  13. }
展开查看全部
vm0i2vca

vm0i2vca2#

(Note Chart.js已经自动添加了工具提示文本;上面的问题有点不清楚。2问题是关于如何在工具提示中添加 custom 文本,而不仅仅是它选择的默认值-给定点的x和y值。3)使用options.tooltips中的callbacks字段。4注意工具提示的主体被称为“标签”。

  1. tooltips: {
  2. intersect: false, // makes it easier to select tooltips on mobile
  3. callbacks: {
  4. title: (toolTipItem, data) => {
  5. let title = toolTipItem[0].x; // uses the x value of this point as the title
  6. return title;
  7. },
  8. label: (toolTipItem, data) => {
  9. let labels = data[toolTipItem.index!].labelText; // assumes your data has a `labelText` field.
  10. return labels;
  11. },
  12. },
  13. },

请注意,某些字段(如title)在其回调中传递了一个toolTipItem对象数组;其他的,如label,被传递了一个对象。因此,toolTipItem对象的属性对于每个对象必须被不同地访问。

  • 回叫文档:http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
  • 您可以在toolTipItem对象上存取的属性-https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
  • 一些官方的例子:https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
  • 如何自定义Chart.js 2.0圆环图的工具提示?
    • 如何换行?* 无论如何,将标签拆分成数组,然后返回数组;数组中的每一行都将在单独的一行上。如果行仍然太长,则需要使用一个函数来检测长行并将其拆分为额外的数组项。
展开查看全部

相关问题