Question

我使用chartjs创建了图形。它工作正常，唯一的问题是它在每个点上都显示了数据标签（数字）。我想隐藏它们，但找不到方法。谁能帮我解决这个问题？我尝试将pointRadius设置为0，但没有达到我想要的效果。

如果我无法隐藏它们，是否可以更改它们的颜色？

const ctx = document.getElementById('timelineChart');

        const chartColors = {
            red: '#C82846',
            green: '#7DC36E',
            blue: '#249FBA',
            darkblue: '#249FBA'
        };

        const config = {
            plugins: [new BandsPlugin()],
            type: 'bar',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "April", "May", "June", "July",
                         "January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        borderColor: chartColors.green,
                        fill: false,
                        type: 'line',
                        id: 'y-axis-1',
                        pointRadius: 0,
                        data: [
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor()
                        ],
                    }, {
                        type: 'bar',
                        id: 'y-axis-0',
                        borderWidth: 1,
                        borderColor: chartColors.green,
                        backgroundColor: chartColors.blue,
                        data: [
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor(),
                            this.randomPositiveFactor()
                        ],
                        fill: false,
                    }]
            },
            options: {
                pointRadius: 1,
                pointHoverRadius: 1,
                legend: {
                    display: false
                },
                elements: {
                    line: {
                        tension: 0,
                    },
                    point: { radius: 0 }
                },
                responsive: true,
                title: {
                    display: false,
                    text: 'Timeline Chart'
                },
                tooltips: {
                    mode: 'label',
                },
                hover: {
                    mode: 'dataset'
                },
                scales: {
                    xAxes: [{
                        barThickness: 15,
                        display: true,
                        scaleLabel: {
                            show: false,
                            labelString: 'Month'
                        },
                        ticks: {
                            beginAtZero: true
                        },
                        afterTickToLabelConversion: function (data) {


                            const xLabels = data.ticks;

                            xLabels.forEach(function (labels, i) {
                                if (i % 2 === 1) {
                                    xLabels[i] = '';
                                }
                            });
                        }
                    }],
                    yAxes: [{
                        id: 'y-axis-0',
                        display: true,
                        position: 'left',
                        scaleLabel: {
                            show: false,
                            labelString: 'Value'
                        },
                        ticks: {
                            suggestedMin: -100,
                            suggestedMax: 100,
                            max: 100,
                            min: 0,
                            stepSize: 100,
                        },
                    },
                    {
                        id: 'y-axis-1',
                        position: 'right',
                        ticks: {
                            suggestedMin: -100,
                            suggestedMax: 100,
                            max: 100,
                            min: -100,
                            stepSize: 100,
                        },
                        scaleLabel: {
                            show: false,
                            labelString: 'Value'
                        },
                    }]
                },
                bands: {
                    yValue: 50,
                    bandLine: {
                        stroke: 0.5,
                        colour: 'black',
                        type: 'dashed',
                    },
                    belowThresholdColour: [
                        chartColors.red,
                        chartColors.blue
                    ]
                }
            }
        };

        const timelineChart = new Chart(ctx, config);

Answer 1

我遇到了同样的问题，并且遇到了这篇文章。我猜你已经安装了datalabels插件（我确实）。将此添加到您的图表选项：

plugins: {
    datalabels: {
        display: false,
    },
}

希望这会有所帮助

Chartjs隐藏数据点标签

1 个答案: