工具提示在 chart.js 中不起作用。有任何想法吗？答案

【问题标题】：Tooltips not working in chart.js. Any ideas?工具提示在 chart.js 中不起作用。有任何想法吗？
【发布时间】：2017-04-25 03:54:51
【问题描述】：

工具提示未显示在我的图表中。你知道为什么吗？

<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js'></script>

<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            // labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'],
            labels: [{% for item in labels %}
                    "{{item}}",
                   {% endfor %}],
            datasets: [
                {
                    data : [{% for item in values %}
                               {{item}},
                             {% endfor %}],
                    backgroundColor: 
                    [
                        "#2ecc71","#3498db","#95a5a6","#6dc066","#daa520",
                        "#9b59b6","#f1c40f","#e74c3c","#34495e","#008080",
                        "#ffc0cb","#d3ffce","#ff7373","#ffa500","#e6e6fa",
                        "#003366","#20b2aa","#c6e2ff","#008000"
                    ] 
                }
            ]
        },
        options: {
            responsive : true,
            showTooltips: true,
            scales: {
                yAxes: [
                    {
                        stacked: false
                    }
                ],   
                xAxes: [
                    {
                        ticks: {
                            autoSkip: true,
                            maxTicksLimit: 20
                        }
                    }
                ]
            }
        }
    });
</script>

这是图表的照片（顶部被切掉了一点）。其他一切工作正常。标签和数据来自我正在运行的 python 脚本，它们产生了预期的结果。这只是我似乎无法使用的工具提示。

感谢您的帮助！

【问题讨论】：

不是 100% 确定，但这可能是由于您的数据集中缺少“标签”选项。尝试在数据集中添加标签，看看它是否修复。
我的问题是由共享的config变量引起的：stackoverflow.com/a/47519851/722036

标签： javascript python chart.js

【解决方案1】：

由于backgroundColor 数组而出现问题。您不能在折线图的单个数据集中使用多种颜色 array。请改用单独的颜色。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['m', 'tu', 'w', 'th', 'f', 'sa', 'su'],
        datasets: [{
            data: [12, 23, 43, 34, 53, 47, 36],
            backgroundColor: '#3498db'
        }]
    },
    options: {
        responsive: true,
        showTooltips: true,
        scales: {
            yAxes: [{
                stacked: false
            }],
            xAxes: [{
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 20
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

【讨论】：

做到了！完美！