图例与提示框

Chart.js 提供灵活的图例和提示框配置，方便你展示图表信息。图例可以控制显示与隐藏、调整位置和样式，提示框则支持丰富的内容格式和交互效果，帮助用户更好理解图表数据。

(function () {
  const ctx = document.getElementById("legendTooltipChart").getContext("2d");
  const legendTooltipChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["苹果", "香蕉", "橙子", "葡萄", "草莓"],
      datasets: [
        {
          label: "水果销量",
          data: [12, 19, 7, 15, 10],
          backgroundColor: [
            "rgba(255, 99, 132, 0.7)",
            "rgba(255, 206, 86, 0.7)",
            "rgba(54, 162, 235, 0.7)",
            "rgba(153, 102, 255, 0.7)",
            "rgba(75, 192, 192, 0.7)",
          ],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          display: true,
          position: "top",
          labels: {
            color: "#444",
            font: { size: 14 },
          },
          onClick: (e, legendItem, legend) => {
            const index = legendItem.datasetIndex;
            const ci = legend.chart;
            ci.toggleDataVisibility(index);
            ci.update();
          },
        },
        tooltip: {
          enabled: true,
          backgroundColor: "rgba(0,0,0,0.8)",
          titleFont: { size: 16, weight: "bold" },
          bodyFont: { size: 14 },
          callbacks: {
            label: function (context) {
              return `销量: ${context.parsed.y}`;
            },
          },
        },
      },
    },
  });
})();

在线代码演示

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Chart.js 图例与提示框示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 700px;
margin: 2rem auto;
font-family: Arial, sans-serif;
background: #fafafa;
padding: 1rem;
}
canvas {
  background: #fff;
  border: 1px solid #ccc;
  display: block;
  margin: 0 auto;
}

</style>
</head>
<body>
<canvas id="legendTooltipChart" width="700" height="400"></canvas>
<script>
(function () {
const ctx = document.getElementById(‘legendTooltipChart’).getContext(‘2d’);
new Chart(ctx, {
type: ‘bar’,
data: {
labels: [‘苹果’, ‘香蕉’, ‘橙子’, ‘葡萄’, ‘草莓’],
datasets: [{
label: ‘水果销量’,
data: [12, 19, 7, 15, 10],
backgroundColor: [
‘rgba(255, 99, 132, 0.7)’,
‘rgba(255, 206, 86, 0.7)’,
‘rgba(54, 162, 235, 0.7)’,
‘rgba(153, 102, 255, 0.7)’,
‘rgba(75, 192, 192, 0.7)’
]
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: ‘top’,
labels: {
color: ‘#444’,
font: { size: 14 }
},
onClick: (e, legendItem, legend) => {
const index = legendItem.datasetIndex;
const ci = legend.chart;
ci.toggleDataVisibility(index);
ci.update();
}
},
tooltip: {
enabled: true,
backgroundColor: ‘rgba(0,0,0,0.8)’,
titleFont: { size: 16, weight: ‘bold’ },
bodyFont: { size: 14 },
callbacks: {
label: function (context) {
return 销量: ${context.parsed.y};
}
}
}
}
}
});
})();
</script>
</body>
</html>

图例与提示框

相关内容