Javascript chart.js响应条形图标签尺寸
因此,我有一个使用chart.js的条形图,并启用了响应。它似乎与一些图表配合得很好,而与其他图表配合得不太好。例如,我的条形图标签似乎不会随着窗口的大小而改变大小,但其他一切都会使整个图表在较小的窗口大小下看起来非常奇怪。如何重新调整标签的大小,使其可以一起缩放?有什么想法吗?谢谢 我的小提琴: Html:Javascript chart.js响应条形图标签尺寸,javascript,jquery,chart.js,Javascript,Jquery,Chart.js,因此,我有一个使用chart.js的条形图,并启用了响应。它似乎与一些图表配合得很好,而与其他图表配合得不太好。例如,我的条形图标签似乎不会随着窗口的大小而改变大小,但其他一切都会使整个图表在较小的窗口大小下看起来非常奇怪。如何重新调整标签的大小,使其可以一起缩放?有什么想法吗?谢谢 我的小提琴: Html: 问题更多地与真正长的x轴标签有关,而不是响应性。也就是说,设置MaintaintAspectRatio将解决您的问题 Chart.defaults.global.maintainAspec
问题更多地与真正长的x轴标签有关,而不是响应性。也就是说,设置
MaintaintAspectRatio
将解决您的问题
Chart.defaults.global.maintainAspectRatio = false;
请注意,您也可以根据图表执行此操作
如果您也想保持纵横比,可以扩展图表以修剪标签,如嘿,谢谢!但当我将其切换为false时,它会使我的画布高度飙升至4320!在小提琴上没有,但在我正在处理的页面上有。知道为什么吗?
responsive
选项将调整图形大小以适合其父容器。尝试在父对象上设置最大高度。
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);
Chart.defaults.global.maintainAspectRatio = false;