当前位置:  开发笔记 > 编程语言 > 正文

Chart.js和长标签

如何解决《Chart.js和长标签》经验,为你挑选了2个好方法。

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

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

谢谢您的帮助!



1> Arivan Basto..:

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

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

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



2> Fermin Arell..:

使用ChartJS 2.1.6并使用@ArivanBastos 答案

只需将您的长标签传递给以下函数,它将以数组形式返回您的标签,每个元素都遵循指定的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;
}

推荐阅读
Chloemw
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有