Charts.js 缩放 yaxes 刻度 min max 不起作用
我有一个带有charts.js 图表的HTML 页面.我正在尝试设置图表的最小值和最大值，但我无法设置最小值和最大值.我搜索了不同的帖子，但他们都说同样的话，我很确定我已经这样做了......
I have an HTML page with a charts.js chart that works. I'm trying to set the minimum and maximum values of the chart, but I can't set the minimum and maximum values. I searched different posts but they all say the same, and I'm pretty sure I'm already doing that...
> scales: {
> yAxes: [{
> ticks: {
> min: -100,
> max: 100
> }
> }]
> }
我就是想不通怎么回事.
I just cant figure out what's wrong.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script>
<title>daily</title>
</head>
<body>
<canvas class='temp_chart' id='temp_chart'>
</body>
<script>
function square_data(chart){
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FFA500";
ctx.rect(145, 70, 15, 15);
ctx.fill()
ctx.fillStyle = "#fff";
ctx.fillText(chart.dataset.data[chart.dataIndex], 147,82, 10);
ctx.stroke();
return c
}
const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
var temperatures = [15, 18, 4, -6]
var ctx = document.getElementById('temp_chart').getContext('2d')
window.chart = new Chart(ctx, {
type: 'line',
data: {
labels: time_of_day,
datasets: [{
fill:false,
label: 'Cantidad Estudiantes',
data: temperatures,
borderColor: [
'rgba(0, 0, 0, 1)',
],
borderWidth: 3
}]
},
options: {
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: 'start',
align: '-45',
clamp: true,
color: "orange",
}
},
elements:{
"point":{"pointStyle":square_data},
}
},
scales: {
yAxes: [{
ticks: {
min: -100,
max: 100
}
}]
}
});
</script>推荐答案
这是因为您使用 v2 语法和 v3，所有更改请阅读 迁移指南，您在选项对象之外定义了比例配置.
That is because you are using v2 syntax with v3, for all changes please read the migration guide and you defined the scale config outside of the options object.
在 v3 中，所有比例都是一个对象，其中对象的键是比例的 ID
In v3 all scales are an object where the key of the object is the ID of the scale
还需要注册数据标签插件才能工作，请参阅脚本块中的第一行.
Also for the datalabels plugin to work you need to register it, see first line in the script block.
最后一件事不包括 2 个主要版本的库，出错的可能性很大
Last thing dont include 2 major versions of a lib, high chance of giving errors
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<title>daily</title>
</head>
<body>
<canvas class='temp_chart' id='temp_chart'>
</body>
<script>
Chart.register(ChartDataLabels); // Added this line
function square_data(chart) {
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FFA500";
ctx.rect(145, 70, 15, 15);
ctx.fill()
ctx.fillStyle = "#fff";
ctx.fillText(chart.dataset.data[chart.dataIndex], 147, 82, 10);
ctx.stroke();
return c
}
const time_of_day = ['Morning', 'Day', 'Evening', 'Night']
var temperatures = [15, 18, 4, -6]
var ctx = document.getElementById('temp_chart').getContext('2d')
window.chart = new Chart(ctx, {
type: 'line',
data: {
labels: time_of_day,
datasets: [{
fill: false,
label: 'Cantidad Estudiantes',
data: temperatures,
borderColor: [
'rgba(0, 0, 0, 1)',
],
borderWidth: 3
}]
},
options: {
// Changed this block
scales: {
y: {
min: -100,
max: 100,
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: 'start',
align: '-45',
clamp: true,
color: "orange",
}
},
elements: {
"point": {
"pointStyle": square_data
},
}
},
});
</script>相关文章