Charts.js 缩放 yaxes ticks min max 不起作用
[英]Charts.js scales yaxes ticks min max doesnt work
问题描述
我有一个带有 charts.js 图表的 HTML 页面。 我正在尝试设置图表的最小值和最大值，但无法设置最小值和最大值。 我搜索了不同的帖子，但他们都说相同的，而且我很确定我已经这样做了......
> scales: {
> yAxes: [{
> ticks: {
> min: -100,
> max: 100
> }
> }]
> }
我只是无法弄清楚出了什么问题。
<!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>
1 个解决方案
解决方案1
1 已采纳 2021-10-29 17:11:41
那是因为您在 v3 中使用 v2 语法，对于所有更改，请阅读迁移指南，并且您在选项对象之外定义了缩放配置。
在 v3 中，所有比例都是一个对象，其中对象的键是比例的 ID
此外，要使 datalabels 插件工作，您需要注册它，请参阅脚本块中的第一行。
最后一件事不包括库的 2 个主要版本，出错的可能性很大
<!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>
Charts.js：未定义矩（使用chart.bundle.min.js）
[英]Charts.js: Moment is not defined (using chart.bundle.min.js)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.