gpt4 book ai didi

javascript - 无法让轴标签显示在 Chart.js 中

转载 作者:行者123 更新时间:2023-11-30 11:19:31 26 4
gpt4 key购买 nike

在 Chart.js 中显示轴标签时遇到问题。我已按照文档进行操作,但似乎无法实际显示标签。

图表代码如下所示:

<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>

<canvas id="m-chart-562-1"></canvas>

<script type="text/javascript">
new Chart(
document.getElementById('m-chart-562-1').getContext('2d'),
{
"type": "bar",
"options": {
"title": {
"display": true,
"text": "Test"
},
"legend": {
"display": true,
"position": "bottom"
},
"scales": {
"xAxes": {
"scaleLabel": {
"display": true,
"labelString": "Horizontal Axis"
}
},
"yAxes": {
"scaleLabel": {
"display": true,
"labelString": "Vertical Axis"
}
}
}
},
"data": {
"datasets": [{
"label": "Number",
"data": [10, 2, 7],
"backgroundColor": "#7cb5ec"
}, {
"label": "Fatalities",
"data": [5, 0, 1],
"backgroundColor": "#434348"
}],
"labels": ["Cars", "Planes", "Boats"]
}
}
);
</script>

否则图表呈现良好,但 x/y 轴均未显示我在设置中设置的轴标签。

这是一个显示相同问题的 JS Fiddle:http://jsfiddle.net/methnen/skfs1fjp/1/

我已经为此苦苦思索了一段时间,非常感谢任何人能给我的帮助。

最佳答案

只需将“[]”括号添加到 Axes 值,如下代码所示:

"scales": {
"xAxes": [{
"scaleLabel": {
"display": true,
"labelString": "Horizontal Axis"
}
}],
"yAxes": [{
"scaleLabel": {
"display": true,
"labelString": "Vertical Axis"
}
}]
}

检查链接: http://jsfiddle.net/skfs1fjp/7/

关于javascript - 无法让轴标签显示在 Chart.js 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50340410/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com