[英]Min value of chart (Chart.js)
I make a chart with Chart.js it's working but, I search for set a minimum value (for exemple 0) but I can't do it. 我使用Chart.js制作了一个图表,但该图表仍然有效,但是我搜索了设置最小值(例如0),但我做不到。
My code : 我的代码:
<script type="text/javascript">
var NbCanvas = document.getElementById("NbTicketsChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var densityData = {
label: 'Nombre de tickets sur la semaine',
data: [20, 25, 30, 25, 30, 35, 40],
backgroundColor: '#336ca6'
};
var barChart = new Chart(NbCanvas, {
type: 'bar',
data: {
labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"],
datasets: [densityData],
options:{
scales: {
yAxes : [{
ticks : {
max : 100,
min : 0
}
}]
}
}
}
});
</script>
I tried with this : 我尝试了这个:
options:{
scales: {
yAxes : [{
ticks : {
max : 100,
min : 0
}
}]
}
}
}
Thanks for reading ! 谢谢阅读 ! Arthur
亚瑟
This just frustrated me a fair bit. 这让我很沮丧。 According to the documentation it seems your method should be working.
根据文档,您的方法似乎应该起作用。 I can only make it work by setting the scale after creating the chart, like below:
我只能在创建图表后通过设置比例来使其工作,如下所示:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <canvas id="NbTicketsChart" width="50" height="50"></canvas> <script> var NbCanvas = document.getElementById("NbTicketsChart"); Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; var densityData = { label: 'Nombre de tickets sur la semaine', data: [20, 25, 30, 25, 30, 35, 40], backgroundColor: '#336ca6' }; var barChart = new Chart(NbCanvas.getContext('2d'), { type: 'bar', data: { labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"], datasets: [densityData] }}); barChart.options.scales.yAxes[0] = {ticks: {min: 0, max: 100, stepValue: 20}} </script>
In posting this i've also noticed it doesn't work when the canvas size is 400 by 400. 50 by 50 seems to work... 在发布此内容时,我还注意到,当画布大小为400 x 400时,它不起作用。50 x 50似乎可以工作...
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <canvas id="NbTicketsChart" width="50" height="50"></canvas> <script> var NbCanvas = document.getElementById("NbTicketsChart"); Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; var densityData = { label: 'Nombre de tickets sur la semaine', data: [20, 25, 30, 25, 30, 35, 40], backgroundColor: '#336ca6' }; var barChart = new Chart(NbCanvas.getContext('2d'), { type: 'bar', data: { labels: ["J-1", "J-2", "J-3", "J-4", "J-5", "J-6", "J-7"], datasets: [densityData] }}); barChart.options.scales.yAxes[0] = {ticks: {min: 0, max: 100, stepValue: 20}} </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.