Chart JS折线图

Question

我必须遗漏一些明显但我无法获得工具提示来处理这个chartjs折线图。我是否必须以某种方式调整它们？

 Chart.defaults.global.defaultFontColor = '#FFF';

            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                   // labels: chartdata.labels,
                   // datasets: dataset
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
                },
                options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true
                                    }
                                }]
                            },
                            title: {
                                display: true,
                                text: 'Custom Chart Title'
                            },
                             legend: {
                                display:false,
                            },
                             tooltips: {
                    mode: 'label',


                        },
                hover: {
                    mode: 'label'
                },
                }

            });

Answer 1

在Chart.js中，backgroundColor和borderColor属性的颜色数组例如用于条形图表，因为图表中有不同的元素（几个条形图）。

在线型中，您只有一个元素（线条，下面有填充），因此您需要使用单一颜色设置这些属性。

如果您将这些属性更改为：

datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1
}]

您将获得以下结果，您可以查看at this fiddle：