chart.js響應條形圖標籤大小

所以我有一個使用chart.js的條形圖，並且我已啓用響應。它似乎適用於某些圖表，並且與其他圖表不太一樣。例如，我的條形圖標籤似乎不會隨窗口重新調整大小，但其他所有操作都會使整個圖表在較小的窗口大小時看起來非常奇怪。我如何重新調整標籤的大小以使其一起縮放？有任何想法嗎？謝謝！chart.js響應條形圖標籤大小

我的小提琴：http://fiddle.jshell.net/SteveSerrano/e3o9z2wg/

HTML：

<canvas id="canvas" width="940" height="540"></canvas>

JS：

var barChartData = { 
    labels: ["Adjust claims fairly", "Pays promptly", "Resolves issues quickly", "Communicates clearly, honestly to agents", "Underwriter knowledge/expirience", "Listens, responds to agents", "Consistant underwriting", "Easy, intuitive functionality-technology", "Stable underwriting market", "Flexible underwriting when warrented"], 
    datasets: [ 
     { 
     label: "My First dataset", 
     //new option, barline will default to bar as that what is used to create the scale 
     type: "line", 
     fillColor: "rgba(225,225,225,0.01)", 
     strokeColor: "rgba(0,0,0,1)", 
     pointColor: "rgba(0,0,0,1)", 
     pointStrokeColor: "#000000", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(0,0,0,1)", 
     data: [9.5, 9.4, 9.3, 9.2, 9.2, 9.1, 9, 9, 9, 9] 
    }, { 
     label: "My First dataset", 
     //new option, barline will default to bar as that what is used to create the scale 
     type: "bar", 
     fillColor: "rgba(225,50,50,0.8)", 
     strokeColor: "rgba(225,50,50,1)", 
     pointColor: "rgba(220,20,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: [7.4, 7.6, 6.2, 6.3, 6.8, 5.8, 7.1, 6.1, 7.6, 5.2] 
    }] 
}; 
Chart.defaults.global.responsive = true; 
//canvases 
var lineBar = document.getElementById("canvas").getContext("2d"); 

//charts 
var myLineBarChart = new Chart(lineBar).Overlay(barChartData);

來源

2015-10-14 Steven Serrano

的問題更多的是用很長的x軸標籤比響應。也就是說，設置maintainAspectRatio將解決您的問題。

Chart.defaults.global.maintainAspectRatio = false;

請注意，您也可以按照圖表執行此操作。

小提琴 - http://fiddle.jshell.net/ab7dr7gu/

如果你想保持縱橫比過，你可以擴展圖表以修剪標籤就像https://stackoverflow.com/a/31699438/360067

來源

2015-10-17 08:02:58 potatopeelings

嘿感謝！但是當我將它切換爲false時，它將我的畫布高度暴漲至4320！不要在小提琴中這樣做，但它在我正在處理的頁面上。任何想法爲什麼？ –

'responsive'選項將根據其父容器調整圖表的大小。嘗試在父級上設置最大高度。 – potatopeelings

chart.js響應條形圖標籤大小

回答

相關問題