Question

我正在尝试在我的图表中添加工具提示，但其中一些标签正在被剪切。

Hier是我的代码

var myPieChart = new Chart(ctx, {
        type: 'pie',
        data: data,
        options: {
            title: {
                display: true,
                text: title,
                fontSize: 36
            },
            tooltips: {
                bodyFontSize: 22,
                callbacks: {
                    label: function (tooltipItem, data) {
                        var number = data.datasets[0].data[tooltipItem.index];
                        var label = data.labels[tooltipItem.index];
                        var sum = data.datasets[0].data.reduce(function (a, b) { return a + b; }, 0);
                        var percentage = getPercent(number, sum);
                        return label + " " + Math.round(percentage) + " %";
                    }
                }
            }
        }

有人可以帮我制作正确的标签吗？非常感谢

此致

Answer 1

我会说你的工具提示已经离开画布的边缘，看看this jsfiddle for an example。或者查看最后的示例代码。

或者，如果没有看到完整的代码，我可能会认为您的2014年图表与2015年图表重叠。也许用CSS中的z-index修复，但是可能会发生与其他图表相反的效果？

jsfiddle的相同代码：

<div style='width: 300px;'>
    <canvas id='chart'></canvas>
</div>

var ctx = document.getElementById('chart');
var chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["I am a really really really really really really  really really really really really reallyreally really really really really really long label so long I might go off the chart"],
        datasets: [{
            data: [5],
        }]
    },
    options: {
        legend: {
            display: false
        },
        maintainAspectRatio: false,
        title: {
            display: false,
            fontSize: 16
        }
    }
});

正在剪切饼图的ChartJS工具提示标签

1 个答案: