Question

工具提示未在我的图表中显示。你能明白为什么吗？

<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脚本，它们会产生预期的结果。它只是我似乎无法工作的工具提示。

感谢您的帮助！

iOS

Answer 1

由于backgroundColor 数组，问题正在发生。您不能在折线图的单个数据集中使用多种颜色 array 。改为使用单独的颜色。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: