chart.js响应式条形图标签大小调整

Question

chart.js响应式条形图标签大小调整

3

我使用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);

- Steven Serrano

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- potatopeelings · Accepted Answer

该问题与响应性关系不大，而与非常长的x轴标签有关。话虽如此，设置maintainAspectRatio将解决您的问题。

Chart.defaults.global.maintainAspectRatio = false;

请注意，您也可以为每个图表执行此操作。

如果您想保持宽高比，您可以扩展图表以裁剪标签，就像在https://stackoverflow.com/a/31699438/360067中所述。