ChartJS - 将图例标题添加到工具提示标题中

Question

您能告诉我在ChartJS选项中添加什么才能将图例标题也添加到工具提示标题中吗？\n在所附的屏幕截图中，您可以看到我想在工具提示的标题中添加年份提醒。

\n

                 var chartdata = {\n                 labels: [\'Jan\',\'Fev\',\'Mar\',\'Avr\',\'Mai\',\'Jui\',\'Jui\',\'Aou\',\'Sep\',\'Oct\',\'Nov\',\'Dec\'],\n                 datasets: JSON.parse(\'<?php echo $datasets ?>\')\n             };\n\n               var graphTarget = $("#graphCanvas");\n\n               var barGraph = new Chart(graphTarget, {\n                   type: \'bar\',\n                   data: chartdata,\n                   options: {\n                            responsive: true,\n                            legend: {\n                                position: \'right\',\n                            },\n                            title: {\n                                display: true,\n                                text: \'Consommation \xc3\xa9lectrique\'\n                            },\n                    tooltips: {\n                      enabled: true,\n                      mode: \'single\',\n                      callbacks: {\n                          label: function(tooltipItems, data) {\n                              return tooltipItems.yLabel + \' kW\';\n                          }\n                      }\n                    },\n                    scales: {\n                      yAxes: [{\n                          ticks: {\n                              // Includes \'kW\' after the value\n                              callback: function(value, index, values) {\n                                  return value + \' kW\';\n                              }\n                          }\n                      }]\n                    }\n                        }\n               });\n

\n

谢谢你！

\n

\n

Answer 1

您可以tooltips title callback按如下方式定义 a：

\n

tooltips: {\n  callbacks: {\n    title: (tooltipItems, data) => tooltipItems[0].xLabel + \' \' +  data.datasets[tooltipItems[0].datasetIndex].label,\n    ...\n  }\n

\n

请查看您修改后的代码，看看它是如何工作的。

\n

\r\n

\r\n

tooltips: {\n  callbacks: {\n    title: (tooltipItems, data) => tooltipItems[0].xLabel + \' \' +  data.datasets[tooltipItems[0].datasetIndex].label,\n    ...\n  }\n

\r\n

var barGraph = new Chart(\'chart\', {\n  type: \'bar\',\n  data: {\n    labels: [\'Jan\', \'Fev\', \'Mar\', \'Avr\', \'Mai\', \'Jui\', \'Jui\', \'Aou\', \'Sep\', \'Oct\', \'Nov\', \'Dec\'],\n    datasets: [{\n        label: \'2019\',\n        data: [3, 4, 5, 2, 3, 2, 3, 4, 1, 2, 4, 5],\n        backgroundColor: \'blue\'\n      },\n      {\n        label: \'2020\',\n        data: [3, 4, 1, 2, 4, 5, 3, 4, 5, 2, 3, 2],\n        backgroundColor: \'green\'\n      }\n    ]\n  },\n  options: {\n    responsive: true,\n    legend: {\n      position: \'right\',\n    },\n    title: {\n      display: true,\n      text: \'Consommation \xc3\xa9lectrique\'\n    },\n    tooltips: {\n      enabled: true,\n      mode: \'single\',\n      callbacks: {\n        title: (tooltipItems, data) => tooltipItems[0].xLabel + \' \' +  data.datasets[tooltipItems[0].datasetIndex].label,\n        label: tooltipItems => tooltipItems.yLabel + \' kW\'\n      }\n    },\n    scales: {\n      yAxes: [{\n        ticks: {\n          beginAtZero: true, \n          callback: value => value + \' kW\'\n        }\n      }]\n    }\n  }\n});

\r\n

\r\n

\r\n

\n