Chart.js - 两个图表的最小值和最大值相同
[英]Chart.js - Same min and max value of two charts
问题描述
I have a simple question:
我有一个简单的问题：
How can i align this two chartjs charts so to have exact the same grid?我怎样才能对齐这两个chartjs图表以便拥有完全相同的网格？
The two charts have same min and max value, furthermore there is a missmatch because in the first chart the y tick labels are letters so the widthes of y axis are different.这两个图表具有相同的最小值和最大值，此外还存在不匹配，因为在第一个图表中，y 刻度标签是字母，因此 y 轴的宽度不同。
Any advice would be usefull,任何建议都会很有用，
Chris Pappas克里斯·帕帕斯
1 个解决方案
解决方案1
0 已采纳 2021-02-08 18:47:02
To my knowledge there is no nice way of doing this.据我所知，没有很好的方法可以做到这一点。 The only dirty workaround I could think of is putting a whole lot of spaces before the tick in the callback from the chart which has to be indented more:我能想到的唯一肮脏的解决方法是在图表回调中的刻度之前放置大量空格，必须缩进更多：
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { callback: (val) => (` ${val}`) } }] } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
canvas { background-color: #eee; }
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.