Chart.JS - 错误的 Y 轴
[英]Chart.JS - Wrong Y axis
问题描述
我在我的 Chart.JS 中添加了两个 y 轴，但我相信两条线曲线都只被左轴引用。 检查下图，其中工具提示显示 2019 点。 红线和蓝线都由左轴引用。 我希望其中一个被右轴引用。
// set default to straight lines - no curves Chart.defaults.global.elements.line.tension = 0.5; // set default no fill beneath the line Chart.defaults.global.elements.line.fill = false; // stacked bar with 2 unstacked lines - nope var barChartData = { labels: ['2016', '2017', '2018', '2019'], datasets: [{ type: 'line', label: 'Red', id: "y-axis-0", backgroundColor: "rgba(51,51,51,0.5)", borderColor: 'rgba(255, 0, 0, 1)', data: [1500, 2600, 4700, 5800] },{ type: 'line', label: 'Red Top', id: "y-axis-0", backgroundColor: "rgba(255, 0, 0, 0.3)", borderColor: "transparent", pointRadius: 0, fill: 0, tension: 0.5, data: [1600, 2700, 4800, 5900] },{ type: 'line', label: 'Red Bottom', id: "y-axis-0", backgroundColor: "rgba(255, 0, 0, 0.3)", borderColor: "transparent", pointRadius: 0, fill: 0, tension: 0.5, data: [1400, 2500, 4600, 5700] }, { type: 'line', label: 'Blue', id: "y-axis-1", backgroundColor: "rgba(151,187,205,0.5)", borderColor: "rgba(44, 130, 201, 1)", data: [5000, 3000, 1000, 0] }, { type: 'line', label: 'Blue Top', id: "y-axis-1", backgroundColor: "rgba(44, 130, 201, 0.3)", borderColor: "transparent", pointRadius: 0.5, fill: 3, tension: 0, data: [5100, 3100, 1100, 100] }, { type: 'line', label: 'Blue Bottom', id: "y-axis-1", backgroundColor: "rgba(44, 130, 201, 0.3)", borderColor: "transparent", pointRadius: 0, fill: 3, tension: 0.5, data: [4900, 2900, 900, 0] } ] }; var ctx = document.getElementById("myChart"); // allocate and initialize a chart var ch = new Chart(ctx, { type: 'bar', data: barChartData, options: { title: { display: false, text: "Chart.js Bar Chart - Stacked" }, tooltips: { mode: 'label' }, responsive: true, scales: { yAxes: [{ stacked: false, position: "left", id: "y-axis-0", ticks: { beginAtZero: true }, scaleLabel: { display: true, labelString: 'Left' }, }, { stacked: false, position: "right", id: "y-axis-1", ticks: { min: -1000, max: 8000, stepSize: 1000, beginAtZero: true, }, scaleLabel: { display: true, labelString: 'Right' }, }, ] }, legend: { display: false, }, } }); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <html> <head> <script src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0'></script> </head> <body> <canvas id="myChart" width="600px" height="400px"></canvas> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-01-21 19:32:49
我能够通过在数据集中用yAxisID替换id来修复它。
Y轴错误的Chart.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.