Question

我想要一个圆环图，但问题是我无法找到那里的JS / Jquery库可以给我我想要的结果。

我尝试ChartJS但显然，它不允许HTML标记，也不允许标签中至少有换行符。即使我设法添加，似乎标签也负责Chart.js图表图例，所以如果我在标签中附加太多字符串，那么图例将会被打破＆＃34;破坏＆＃34;。我只是想在标签上显示更多信息。

不解析HTML标记：

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
                }
        }
};

你们知道我可以使用的其他任何图书馆吗？或者，如果我可以在Chart.js上做一个技巧？

谢谢！

Answer 1

您可以通过提供标签回调（在选项中）将标签与图例分开，并且可以通过传递字符串数组（as per documentation）使工具提示标签成为多行。

＆＃13;

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);

＆＃13;

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

＆＃13;

圆环图JS / Jquery允许在其标签中使用HTML标签？

1 个答案: