chart.js响应式条形图标签大小 [英] chart.js responsive bar chart label sizing

问题描述

所以我有一个使用chart.js的条形图，并且启用了响应式.对于某些图表，它似乎工作得很好，而对于其他图表，效果却不太好.例如，我的条形图标签似乎没有随窗口调整大小，但是其他所有操作确实使整个图表在较小的窗口大小下显得非常奇怪.如何调整标签的大小，以便一起缩放?有任何想法吗?谢谢！

So I have a bar chart using chart.js and I have the responsive enabled. It seems to work well with some charts and not so well with others. For example my bar chart labels seem to not re-size with the window, but everything else does making the entire chart look awfully strange at smaller window sizes. How can I re-size the labels so that it scales all together? Any ideas? Thanks!

我的小提琴: 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);

推荐答案

这个问题与真正长的x轴标签有关，而不是响应能力.也就是说，设置maintainAspectRatio将解决您的问题.

The problem has more to do with the really long x axis labels than the responsiveness. That said, setting maintainAspectRatio will solve your problem.

Chart.defaults.global.maintainAspectRatio = false;

请注意，您也可以针对每个图表执行此操作.

Note that you can do this per chart too.

如果您也想保持宽高比，则可以扩展图表以修剪标签，例如 https://stackoverflow. com/a/31699438/360067

If you want to maintain the aspect ratio too, you can extend the chart to trim the labels like in https://stackoverflow.com/a/31699438/360067

这篇关于chart.js响应式条形图标签大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！