簡體   English   中英

圖表的最小值(Chart.js)

[英]Min value of chart (Chart.js)

我使用Chart.js制作了一個圖表,但該圖表仍然有效,但是我搜索了設置最小值(例如0),但我做不到。

我的代碼:

    <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>

我嘗試了這個:

  options:{
    scales: {
        yAxes : [{
            ticks : {
                max : 100,    
                min : 0
            }
        }]
    }
 }
}

謝謝閱讀 ! 亞瑟

這讓我很沮喪。 根據文檔,您的方法似乎應該起作用。 我只能在創建圖表后通過設置比例來使其工作,如下所示:

 <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> 

在發布此內容時,我還注意到,當畫布大小為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> 
那是很好的解決方案,但不適用於char.js 2.8我使用2.7

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM