Question

我正在尝试向我的图表添加工具提示，选项正确加载，但工具提示没有显示，有任何想法吗？

        <script>

        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    fillColor : "rgba(139, 157, 195, 1)",
                    strokeColor : "#4c66a4",
                    pointColor : "#fff",
                    pointStrokeColor : "#3b5998",
                    pointHighlightFill: "#fff",
                    data : [{{implode(',', $fanCounts)}}]

                }
            ]
        }

        var options = {
                    showTooltips: true,
                    tooltipEvents: ["mousemove", "touchstart", "touchmove"],
                    tooltipFillColor: "rgba(0,0,0,0.8)"
                }

        var myLine = new Chart(document.getElementById("fancanvas").getContext("2d")).Line(lineChartData, options);

        </script>

我还更改了chart.js全局配置，以启用折线图的工具提示。

Answer 1

var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true,
        showTooltips: true,
        multiTooltipTemplate: "<%= value %>",
    });

使用此（全局设置）

Answer 2

您只需要将背景设为一个值：

datasets: [{
    label: "# of beauty womens",
    data: [12, 5, 3],
    backgroundColor: "#FC940B",
    fill: false,
    borderColor: "#FC940B"
}]

...拥抱

Chart.js工具提示未显示

2 个答案: