Question

我使用Chart.js创建了一个气泡图，但是只有当鼠标悬停在气泡上时，才会显示每个气泡的数据标签。默认情况下如何显示所有气泡的数据标签（即，不将鼠标悬停在顶部）？

new Chart(document.getElementById("stock-chart"), {
    type: 'bubble',
    data: {
      labels: "Africa",
      datasets: [
        {
          label: ["Stock 3, Stock 4"],
          backgroundColor: "rgba(255,221,50,0.2)",
          borderColor: "rgba(255,221,50,1)",
          data: [{
            x: 0.1,
            y: 5.245,
            r: 15
          }]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Chart title',
        fontSize: 28
      }, 
      scales: {
        yAxes: [{ 
          scaleLabel: {
            display: true,
            labelString: "Return",
            fontSize: 25
          },
          ticks: {
              fontSize: 20
          }
        }],
        xAxes: [{ 
          scaleLabel: {
            display: true,
            labelString: "Risk",
            fontSize: 25
          },
          ticks: {
            fontSize: 20
        }
        }]
      },

      tooltips: {
          callbacks: {
              label: function(tooltipItem, data) {
                  var label = data.datasets[tooltipItem.datasetIndex].label;
                  return label;
              }
          }
      }

    }
});

Answer 1

这可以通过使用chartjs-plugin-datalabels（https://github.com/chartjs/chartjs-plugin-datalabels）来实现。具体来说，请删除tooltips中的plugins部分，然后添加以下部分：

        datalabels: {
            anchor: function(context) {
                return 'center';
            },
            align: function(context) {
                return 'center';
            },
            font: {
                weight: 'bold',
                size: '15'
            },
            formatter: function(value) {
                return value.label;
            },
            offset: 0,
            padding: 0
        }```

如何在不将鼠标悬停在气泡上的情况下显示数据标签

1 个答案: