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.