如何使ChartJS不切断工具提示？

Question

我想弄清楚如何让chartjs不要切断它的工具提示，但我似乎找不到配置选项来解决这个问题。

这是我到目前为止所尝试的：

<script>
        $(document).ready(function() {


            var doughnutData = [
                {
                    value: 48.3,
                    color: "#81d7d8",
                    highlight: "#23c6c8",
                    label: "Accepted"
                },
                {
                    value: 20.7,
                    color: "#f58894",
                    highlight: "#d9534f",
                    label: "Denied"
                },
                {
                    value: 31,
                    color: "#f5c592",
                    highlight: "#f8ac59",
                    label: "Pending"
                }
            ];

            var doughnutOptions = {
                segmentShowStroke: true,
                segmentStrokeColor: "#fff",
                segmentStrokeWidth: 2,
                percentageInnerCutout: 45, // This is 0 for Pie charts
                animationSteps: 100,
                animationEasing: "easeOutBounce",
                animateRotate: true,
                animateScale: false,
                    fullWidth: true
            };

            var ctx = document.getElementById("doughnutChart").getContext("2d");
            var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);



        });
    </script>

在我的HTML中，相应的部分如下所示：

<div class="col-lg-3">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas>
        </div>
    </div>
</div>

任何可以指出我在这里失踪的人都会发现？

Answer 1

由于您使用的是旧版Chart.js v1.x ，因此您没有像 v2那样多的可能性.X

解决问题的一种简单方法是在选项中编辑工具提示的样式。这不会更改您图表的height和width的默认95px：

    var doughnutOptions = {
        // ...
        fullWidth: true,
        tooltipFontSize: 10
    };

并且会给this result。