圆环图JS / Jquery允许HTML标签在其标签？ [英] donut chart JS/Jquery that allows HTML tags in its label?

问题描述

我想要一个圆环图，但问题是我找不到哪些JS / Jquery库可以给我想要的结果。

我尝试

  var config1 = {
 type：'donut'，
 data：{
 labels： 
Pass< br /> + 
移动测试：1< br /> + 
增加测试：2< br /> + 
Rewrite Test：19，
Fail，
]，
 datasets：[
 {
 data：data：[22，4 ]，
 backgroundColor：[
＃1AFF00，
＃FF0A0A，
]，
 hoverBackgroundColor：[
＃20FF08，
＃FF0000，
] 
}] 
}，
选项：{
 responsive：true，
 legend：{
位置：'top'，
}，
标题：{
 display：true，
 text：'通过的所有条目vs不同测试失败的
} ，
 animation：{
 animateScale：true，
 animateRotate：true 
} 
} 
}; 
  

你们知道任何其他图书馆可以使用吗？

谢谢！

解决方案

您可以通过提供一个标签回调（在选项中）来分离标签和标签，您可以通过传递一个字符串数组（）。

  var ctx = document.getElementById（canvas）; var data = {type：'donut'，data：{labels ：[＃Pass，Fail，]，datasets：[{data：[22，4]，backgroundColor：[＃1AFF00，＃FF0A0A，] hoverBackgroundColor：[＃20FF08，＃FF0000 ，}}]，options：{responsive：true，legend：{position：'top'，}，title：{display：true，text：'Passed vs Fail from different tests'}，animation：{ animateScale：true，animateRotate：true}，tooltips：{callbacks：{label：function（tooltipItems，data）{if（data.labels [tooltipItems.index] =='Pass'）{return ['Pass'，' ：1'，'Increment Test：2'，'Rewrite Test：19']; } return data.labels [tooltipItems.index]; }}}}}; var theChart = new Chart（ctx，data）;  

 < script src =https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js>< / script>< canvas ID =canvasheight =150>< / canvas>  

I want a donut chart, but the problem is I can't find which JS/Jquery library out there can give me the result that I want.

I tried ChartJS but apparently, it does not allow HTML tags nor at least line breaks in the label. And even if I managed to add, it seems the label is also responsible for Chart.js chart legend, so if I append too much string in the label the legend will be "broken". I just want to show more information in the label.

Not parsing the HTML tags:

var config1 = {
        type: 'doughnut',
        data : {
            labels: [
                "Pass<br/>" +
                "Move Test: 1<br/>" +
                "Increment Test: 2<br/>" +
                "Rewrite Test: 19",
                "Fail",
            ],
            datasets: [
                {
                    data: data: [22, 4],
                    backgroundColor: [
                        "#1AFF00",
                        "#FF0A0A",
                    ],
                    hoverBackgroundColor: [
                        "#20FF08",
                        "#FF0000",
                    ]
                }]
        },
        options : {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'All entries that Passed vs Fail from different tests'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
        }
};

Do you guys know any other library I can use for that? Or if there's a trick I can do on Chart.js?

Thank you!

解决方案

You can separate labels from legends by providing a label callback (in options), and you can make a tooltip label multi-line by passing an array of strings (as per documentation).

var ctx = document.getElementById("canvas");
var data = {
    type: 'doughnut',
    data: {
        labels: [
            "Pass",
            "Fail",
        ],
        datasets: [
            {
                data: [22, 4],
                backgroundColor: [
                    "#1AFF00",
                    "#FF0A0A",
                ],
                hoverBackgroundColor: [
                    "#20FF08",
                    "#FF0000",
                ]
            }]
    },
    options : {
            responsive: true,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'All entries that Passed vs Fail from different tests'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItems, data) {
                        if(data.labels[tooltipItems.index] == 'Pass') {
                            return ['Pass','Move Test: 1','Increment Test: 2','Rewrite Test: 19'];
                        }
                        return data.labels[tooltipItems.index];
                    }
                }
            }
    }
};

var theChart = new Chart(ctx, data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="150"></canvas>

这篇关于圆环图JS / Jquery允许HTML标签在其标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！