[英]How do I make the Line in ChartJS not exceed the maximum of yAxes
I want the Line from this ChartJS not to exceed the maximum yAxes or in other words the line stays inside the element even though the datasets.data exceeds yAxes, i have searched the documentation myself but did not find it 我希望来自此ChartJS的行不超过最大yAxes,换句话说,即使datasets.data超过yAxes,该行仍保留在元素内,我自己搜索了文档但没有找到
Like This 像这样
This my code 这是我的代码
// Chartjs var ctx = document.getElementById('chart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['SUN', 'MON', 'TUE', 'WED', 'THU', "FRI", 'SAT'], datasets: [{ label: 'Daily Data', data: [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000], borderColor: '#3f89fb', borderWidth: 3, fill: false }] }, options: { scales: { // X or Horizontal xAxes: [{ gridLines: { color: "rgba(0, 0, 0, 0)", } }], // Y or Vertical yAxes: [{ stacked: true, ticks: { beginAtZero:true, max: 1000000, min: 0, stepSize: 200000, callback: function(value, index, values) { return value / 1e6 + 'M'; } }, gridLines: { color: "rgba(0, 0, 0, 0)", } }] }, // Tooltips tooltips: { callbacks: { label: function(tooltipItem, chart) { let datasetsData = chart.datasets[0].data[tooltipItem.index]; if (datasetsData.toString().length <= 6) { return 'Income Rp. '+datasetsData.toLocaleString() + 'K'; }else { return 'Income Rp. '+datasetsData.toLocaleString() + ' M'; } } } } } });
Given your code you can do something like: Move your data to a var like 给定代码,您可以执行以下操作:将数据移至var这样
var myData = [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000];
Then change your data field to data: myData,
Then change your Ticks to 然后将您的数据字段更改为
data: myData,
然后将Ticks更改为
ticks: {
beginAtZero:true,
max: Math.max.apply(Math, myData), //Sets the max to the max data you have
min: 0,
stepSize: 200000,
callback: function(value, index, values) {
return value / 1e6 + 'M';
}
},
You can add something to the max to make it a bit bigger. 您可以增加一些最大的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.