Question

我正在使用图表js来显示上周销售量排名前三的产品。我想在工具提示中为每个明显具有不同产品的栏显示产品名称。

这是我的代码：

function productChart() {
        var data = {
            labels: productHistoryDates,
            datasets: [{
                label: 'Product 1',
                data: productHistoryProducts1,
                backgroundColor: "#26B99A"
            },
            {
                label: 'Product 2',
                data: productHistoryProducts2,
                backgroundColor: "#03586A",
            },
            {
                label: 'Product 3',
                data: productHistoryProducts3,
                backgroundColor: "#03226A",
            }]
        };
        var ctx = document.getElementById("productChart").getContext("2d");

        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: data,

            options: {
                tooltips: {
                    enabled: true,
                    mode: 'single',

                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: true
                        },
                        barPercentage: 0.8
                    }]
                }

            }
        });
    }

我正在得到这样的输出。

但是我要获得该特定酒吧的产品名称而不是产品1标签，如何实现？

Answer 1

我解决了。通过将数组传递给数据中的标签。其余代码如下。

 function productChart() {
        var data = {
            labels: productHistoryDates,
            datasets: [{
                label: productHistoryProducts1.name,
                data: productHistoryProducts1.quantity,
                backgroundColor: "#26B99A"
            },
            {
                label: productHistoryProducts2.name,
                data: productHistoryProducts2.quantity,
                backgroundColor: "#03586A",
            },
            {
                label: productHistoryProducts3.name,
                data: productHistoryProducts3.quantity,
                backgroundColor: "#03226A",
            }]
        };
        var ctx = document.getElementById("productChart").getContext("2d");

        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: data,

            options: {

                tooltips: {
                    enabled: true,
                    mode: 'single',
                    callbacks: {
                        label: function (tooltipItems, data) {
                            var tooltip = data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
                            return tooltip;
                        }
                    }
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: true
                        },
                        ticks: { mirror: true },
                        barPercentage: 0.8
                    }]
                }

            }
        });
    }

如何在图表JS中为每个条形显示不同的产品名称

1 个答案: