chart.js响应条形图标签大小
所以我有一个使用chart.js的条形图，我启用了响应。 它似乎适用于某些图表而不是其他图表。 例如，我的条形图标签似乎没有重新调整窗口大小，但其他一切确实使整个图表在较小的窗口大小时看起来非常奇怪。 如何重新调整标签大小以使其一起缩放？ 有任何想法吗？ 谢谢！
我的小提琴： http ： //fiddle.jshell.net/SteveSerrano/e3o9z2wg/
HTML：
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);
问题与真正长的x轴标签有关，而不是响应性。 也就是说，设置maintainAspectRatio将解决您的问题。
Chart.defaults.global.maintainAspectRatio = false;
请注意，您也可以在每个图表中执行此操作。
如果您还想保持纵横比，可以扩展图表以修剪标签，如https://stackoverflow.com/a/31699438/360067