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响应条形图标签大小

回答

相关问题