Chart.js和长标签

问题描述 投票:21回答:5

我使用Chart.js来显示雷达图。我的问题是有些标签很长:图表无法显示或显得非常小。

那么,有没有办法打破线条或为标签分配最大宽度?

谢谢您的帮助!

charts chart.js radar-chart
5个回答
37
投票

对于Chart.js 2.0+,您可以使用数组作为标签:

引用DOC:“用法:如果标签是一个数组而不是字符串,即[[”June“,”2015“],”July“]那么每个元素都被视为一个单独的行。”

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}

16
投票

使用ChartJS 2.1.6并使用@ArivanBastos answer

只需将您的长标签传递给以下函数,它将以数组形式返回您的标签,每个元素都遵循您指定的maxWidth。

/* takes a string phrase and breaks it into separate phrases 
   no bigger than 'maxwidth', breaks are made at complete words.*/

function formatLabel(str, maxwidth){
    var sections = [];
    var words = str.split(" ");
    var temp = "";

    words.forEach(function(item, index){
        if(temp.length > 0)
        {
            var concat = temp + ' ' + item;

            if(concat.length > maxwidth){
                sections.push(temp);
                temp = "";
            }
            else{
                if(index == (words.length-1))
                {
                    sections.push(concat);
                    return;
                }
                else{
                    temp = concat;
                    return;
                }
            }
        }

        if(index == (words.length-1))
        {
            sections.push(item);
            return;
        }

        if(item.length < maxwidth) {
            temp = item;
        }
        else {
            sections.push(item);
        }

    });

    return sections;
}

2
投票

您可以编写一个javascript函数来自定义标签: // Interpolated JS string - can access value scaleLabel: "<%=value%>",

http://www.chartjs.org/docs/#getting-started-global-chart-configuration


1
投票

不幸的是,直到现在(2016年4月5日)还没有解决方案。 Chart.js有很多问题需要解决这个问题:

这是一个解决方法:Remove x-axis label/text in chart.js


0
投票

看起来你可能实际上是在谈论数据标签,而不是规模标签。在这种情况下,您需要使用pointLabelFontSize选项。见下面的例子:

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
  labels: ["Eating", "Sleeping", "Coding"],
  datasets: [
    {
        label: "First",
        strokeColor: "#f00",
        pointColor: "#f00",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [45, 59, 90]
    },
    {
        label: "Second",
        strokeColor: "#00f",
        pointColor: "#00f",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [68, 48, 40]
    }
  ]
};

// This is the important part
var options = {
  pointLabelFontSize : 20
};

var myRadarChart = new Chart(ctx).Radar(data, options);

最后,您可能想要使用<canvas>元素的尺寸,因为我发现有时给雷达图表更高的高度有助于自动缩放所有内容。

© www.soinside.com 2019 - 2024. All rights reserved.