图例位置 Chart.js
Legend position with Chart.js
我正努力将图例放置在 Chart.js 的图表中。代码在这里。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop combination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose combinations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaucoma",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>
尽管我在关注 documentation，但图例仅位于图表的顶部。
如何将图例放在右边？
您需要将 legend 包裹在 plugins 中，参见 example (click the actions tab to see how they adjust the legend position) or this example 配置中明确写入的位置
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop combination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose combinations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaucoma",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"plugins": {
"legend": {
"align": "start",
"position": "right"
}
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>
您的代码有一些问题：
- 图例命名空间在 v2 位置而不是 v3，在 v3 中它已移至
options.plugins.legend
- 比例尺定义为 v2 语法的数组，在 v3 中所有比例尺都是它们自己的对象，其中比例尺 ID 是对象键
backgroundColorHover 不是有效的 属性，您应该使用 hoverBackgroundColor 来定义该颜色，同时为了使悬停时颜色相同，您不应该将其定义为 null 而是将其定义为相同的颜色。beginAtZero 未在刻度中定义，但现在在刻度的根部定义，但由于它在类别刻度上没有任何作用，我已将其删除。
对于 v2 和 v3 之间的所有更改，您可以阅读 migration guide
由于比例配置现在可以使它更干净，您可以删除每个数据集中所有不必要的堆栈，而且您不必指定它是一个条形数据集，因为默认类型会处理它。如果你偏离它，你只需要指定它。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [{
"label": "1 drop only: 1 active ingredient only",
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"hoverBackgroundColor": "#A76FDE"
},
{
"label": "1 fixed dose drop combination only",
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"hoverBackgroundColor": "#CAA9EB"
},
{
"label": "Multiple drops only, excluding fixed dose combinations only",
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"hoverBackgroundColor": "#B4C12F"
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"hoverBackgroundColor": "#002060"
},
{
"label": "Other laser treatments for glaucoma",
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"hoverBackgroundColor": "#009999"
},
{
"label": "MIGS",
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"hoverBackgroundColor": "#DA1884"
},
{
"label": "Traditional incisional surgery",
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"hoverBackgroundColor": "#FDC741"
}
]
},
"options": {
"scales": {
"x": {
"stacked": true,
"ticks": {
"maxRotation": 0,
"minRotation": 0
}
},
"y": {
"stacked": true
}
},
"responsive": true,
"plugins": {
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>
我正努力将图例放置在 Chart.js 的图表中。代码在这里。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop combination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose combinations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaucoma",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>
尽管我在关注 documentation，但图例仅位于图表的顶部。
如何将图例放在右边？
您需要将 legend 包裹在 plugins 中，参见 example (click the actions tab to see how they adjust the legend position) or this example 配置中明确写入的位置
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [
{
"label": "1 drop only: 1 active ingredient only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"backgroundColorHover": null
},
{
"label": "1 fixed dose drop combination only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"backgroundColorHover": null
},
{
"label": "Multiple drops only, excluding fixed dose combinations only",
"type": "bar",
"stack": null,
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"backgroundColorHover": null
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"type": "bar",
"stack": null,
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"backgroundColorHover": null
},
{
"label": "Other laser treatments for glaucoma",
"type": "bar",
"stack": null,
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"backgroundColorHover": null
},
{
"label": "MIGS",
"type": "bar",
"stack": null,
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"backgroundColorHover": null
},
{
"label": "Traditional incisional surgery",
"type": "bar",
"stack": null,
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"backgroundColorHover": null
}
]
},
"options": {
"scales": {
"xAxes": [
{
"stacked": true,
"ticks": {
"beginAtZero": true,
"maxRotation": 0,
"minRotation": 0
}
}
],
"yAxes": [
{
"stacked": true
}
]
},
"responsive": true,
"plugins": {
"legend": {
"align": "start",
"position": "right"
}
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>
您的代码有一些问题：
- 图例命名空间在 v2 位置而不是 v3，在 v3 中它已移至
options.plugins.legend - 比例尺定义为 v2 语法的数组，在 v3 中所有比例尺都是它们自己的对象，其中比例尺 ID 是对象键
backgroundColorHover不是有效的 属性，您应该使用hoverBackgroundColor来定义该颜色，同时为了使悬停时颜色相同，您不应该将其定义为null而是将其定义为相同的颜色。beginAtZero未在刻度中定义，但现在在刻度的根部定义，但由于它在类别刻度上没有任何作用，我已将其删除。
对于 v2 和 v3 之间的所有更改，您可以阅读 migration guide
由于比例配置现在可以使它更干净，您可以删除每个数据集中所有不必要的堆栈，而且您不必指定它是一个条形数据集，因为默认类型会处理它。如果你偏离它，你只需要指定它。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.min.js"></script>
<meta name="viewport" content="initial-scale = 1, user-scalable = no" />
<style>
canvas {}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<script>
var model = {
"type": "bar",
"data": {
"labels": [
"SOB - base case",
"SOB simulated product"
],
"datasets": [{
"label": "1 drop only: 1 active ingredient only",
"backgroundColor": [
"#A76FDE"
],
"data": [
0.0364,
0.0911
],
"hoverBackgroundColor": "#A76FDE"
},
{
"label": "1 fixed dose drop combination only",
"backgroundColor": [
"#CAA9EB"
],
"data": [
0.0189,
0.0517
],
"hoverBackgroundColor": "#CAA9EB"
},
{
"label": "Multiple drops only, excluding fixed dose combinations only",
"backgroundColor": [
"#B4C12F"
],
"data": [
0.025,
0.0487
],
"hoverBackgroundColor": "#B4C12F"
},
{
"label": "Selective Laser Trabeculoplasty (SLT)",
"backgroundColor": [
"#002060"
],
"data": [
0.0121,
0.0293
],
"hoverBackgroundColor": "#002060"
},
{
"label": "Other laser treatments for glaucoma",
"backgroundColor": [
"#009999"
],
"data": [
0.0025,
0.0071
],
"hoverBackgroundColor": "#009999"
},
{
"label": "MIGS",
"backgroundColor": [
"#DA1884"
],
"data": [
0.0004,
0.0109
],
"hoverBackgroundColor": "#DA1884"
},
{
"label": "Traditional incisional surgery",
"backgroundColor": [
"#FDC741"
],
"data": [
0,
0.0095
],
"hoverBackgroundColor": "#FDC741"
}
]
},
"options": {
"scales": {
"x": {
"stacked": true,
"ticks": {
"maxRotation": 0,
"minRotation": 0
}
},
"y": {
"stacked": true
}
},
"responsive": true,
"plugins": {
"legend": {
"display": true,
"position": "right",
"align": "start"
}
}
}
}
new Chart(document.getElementById("canvas").getContext("2d"), model);
</script>
</body>
</html>