Chart.js图例文本显示undefined

nukf8bse 于 2023-10-18 发布在 Chart.js

关注(0)|答案(3)|浏览(177)

我试着在chart.js中显示四个水平条，上面有图例;但是对于每种情况，文本都显示为undefined。如何在chart.js中定义或声明图例的文本？
我的html代码：

<div class="chart bar-chart dark">
        <h3 class="title">Name</h3>
        <p class="tagline">chocolates</p>
        <canvas height="400" id="barChartHDark"></canvas>
    </div>
    <div class="chart radar-chart light">
        <h3 class="title">Bauxite</h3>
        <p class="tagline">P&B Dispatch</p>
        <canvas height="400" id="radarChartLight"></canvas>
    </div>

我的JavaScript代码：

Charts.prototype.initBarHorizontal = function () {
    var ctxD = $("#barChartHDark"), chartData = {
        type: 'horizontalBar',
        data: {
            labels: ["Today", "Last week", "Last month", "Last Year"],
            datasets: [{
                    data: [7, 59, 68, 26],
                    backgroundColor: this.colors[0],
                    hoverBackgroundColor: this.convertHex(this.colors[0], 70),
                },
                {
                    data: [, 23, 44, 30],
                    backgroundColor: this.colors[1],
                    hoverBackgroundColor: this.convertHex(this.colors[1], 70),
},
                {
                    data: [, 3, -7, 1],
                    backgroundColor: this.colors[2],
                    hoverBackgroundColor: this.convertHex(this.colors[2], 70),
                }]
        },
        options: {
            barThickness: 1,
            scales: {
                xAxes: [{
                        stacked: true,
                        ticks: {
                            fontColor: this.tickColor
                        },
                        gridLines: {
                            drawOnChartArea: false
                        }
                    }],
                yAxes: [{
                        stacked: true,
                        ticks: {
                            fontColor: this.tickColor,
                            min: 0,
                            max: 175,
                            stepSize: 25
                        }
                    }]
            },
            labels: ['Current data','Vs last week/month/year','Change'],
            name: ['Current data','Vs last week/month/year','Change'],
            legend: {
                display: true,
                legendText : ['Current','Vs last week/month/year','% Change']
                    },     
        }
    }, myDarkRadarChart = new Chart(ctxD, chartData), myLightRadarChart = new Chart(ctxL, chartData);
};

它给出的输出如下：

如何更改顶部显示为“未定义”的文本？

chart.js

来源：https://stackoverflow.com/questions/50170521/chart-js-legend-text-showing-undefined

3条答案

按热度按时间

9rygscc11#

试试这个：）

Charts.prototype.initBarHorizontal = function () {
    var ctxD = $("#barChartHDark"), chartData = {
    type: 'horizontalBar',
    data: {
        labels: ["Today", "Last week", "Last month", "Last Year"],
        datasets: [{
                label: 'Something1',
                data: [7, 59, 68, 26],
                backgroundColor: this.colors[0],
                hoverBackgroundColor: this.convertHex(this.colors[0], 70),
            },
            {
                label: 'Something2',
                data: [, 23, 44, 30],
                backgroundColor: this.colors[1],
                hoverBackgroundColor: this.convertHex(this.colors[1], 70),
},
            {
                label: 'Something3',
                data: [, 3, -7, 1],
                backgroundColor: this.colors[2],
                hoverBackgroundColor: this.convertHex(this.colors[2], 70),
            }]
    },
    options: {
        barThickness: 1,
        scales: {
            xAxes: [{
                    stacked: true,
                    ticks: {
                        fontColor: this.tickColor
                    },
                    gridLines: {
                        drawOnChartArea: false
                    }
                }],
            yAxes: [{
                    stacked: true,
                    ticks: {
                        fontColor: this.tickColor,
                        min: 0,
                        max: 175,
                        stepSize: 25
                    }
                }]
        },
        labels: ['Current data','Vs last week/month/year','Change'],
        name: ['Current data','Vs last week/month/year','Change'],
        legend: {
            display: true,
            legendText : ['Current','Vs last week/month/year','% Change']
                },     
    }
}, myDarkRadarChart = new Chart(ctxD, chartData), myLightRadarChart = new Chart(ctxL, chartData);
};

对于每个数据集，您必须添加：

label: 'Something'

赞(0）回复(0）举报 2023-10-18

doinxwow2#

您可以尝试按照文档中的定义定义标签。我https://www.chartjs.org/docs/latest/configuration/legend.html#configuration-options相信它是标签（作为图例标签项的数组），
{text: "something"}
作为一种模式（参见https：//www.chartjs.org/docs/latest/configuration/configuration.html#configurd-item-interface）。

赞(0）回复(0）举报 2023-10-18

vhipe2zx3#

“"中必须设置选项值名称：

options: {
                "legend": {
                    "display": false
                }
            }

参见完整的工作示例：

new Chart("myChartsignup", {
    type: "bar",
    data: {
        labels: xValues,
        datasets: [{
            backgroundColor: barColors,
            data: yValues
        }]
    },
    options: {
        "legend": {
            "display": false
        }
    }
});

赞(0）回复(0）举报 2023-10-18

我来回答

Chart.js图例文本显示undefined

3条答案

相关问题

热门标签

最新问答