如何在 Charts.js 的工具箱中显示图例？答案

【问题标题】：How to display legend in toolbox in Charts.js?如何在 Charts.js 的工具箱中显示图例？
【发布时间】：2021-07-11 11:26:25
【问题描述】：

我在我的 Django 项目中使用charts.js 创建了一个散点图。它工作正常，但在工具箱中，图例名称不显示，只是显示数字。如何显示？

我想显示为：Argentina(44015314.68,28)

我的代码：

var bubbleChart = document.getElementById('mybubbleChart').getContext('2d')

        var myBubbleChart = new Chart(bubbleChart,{
            type: 'scatter',
            data: {
                datasets:[{
                    label: name_1,
                    data:[{x:x_1,y:y_1}],
                    backgroundColor:"#716aca"
                },{
                    label: name_2,
                    data:[{x:x_2,y:y_2}],
                    backgroundColor:"#d643ad"
                },{
                    label: name_3,
                    data:[{x:x_3,y:y_3}],
                    backgroundColor:"#2ec3be"
                },{
                    label: name_4,
                    data:[{x:x_4,y:y_4}],
                    backgroundColor:"#2ec34e"
                }, {
                    label: name_5,
                    data:[{x:x_5,y:y_5}],
                    backgroundColor:"#decb3e"
                },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                },
                tooltip: { isHtml: false },
                elements: {
                    point: {
                        radius: 10,
                        hoverRadius: 15,
                        }
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },

                    }],
                    xAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                    }]
                },
            }
        });

【问题讨论】：

那不是google chart，是chart.js
哦，对不起，我修好了……

标签： javascript python django charts chart.js

【解决方案1】：

您可以通过使用自定义回调来更改工具提示的文本，如下所示：

  options: {
    tooltips: {
        callbacks: {
        label: (tooltipItem, data) => (`${data.datasets[tooltipItem.datasetIndex].label}(${tooltipItem.xLabel},${tooltipItem.yLabel})`)
      }
    }
  }

工作示例：

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 5,
        y: 4
      }, {
        x: 2,
        y: 7
      }, {
        x: 3,
        y: 3
      }, {
        x: 3.5,
        y: 5.5
      }],
      backgroundColor: 'red'
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => (`${data.datasets[tooltipItem.datasetIndex].label}(${tooltipItem.xLabel},${tooltipItem.yLabel})`)
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

【讨论】：