Question

我已经在chart.js库的帮助下创建了一些图表。它可以正常工作，但图例始终处于未定义状态。

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    </head>
    <body>
        <canvas id="barchart" width="100%" height="40%"></canvas>

        <script>
            d3.csv("data.csv").then(makechart);

            function getRandomColorHex() {
                var hex = "0123456789ABCDEF",
                    color = "#";
                for (var i = 1; i <= 6; i++) {
                  color += hex[Math.floor(Math.random() * 16)];
                }
                return color;
              }        

            function makechart(delivery){
                var prd = [], amt = [];
                delivery.forEach(element => {
                    prd.push(element.Production);
                    amt.push(element.Amount);                   
                });

               var barchart = new Chart('barchart', {
                    type: 'bar',
                    data: {
                        labels: prd,
                        datasets:
                            [{
                                backgroundColor: getRandomColorHex(),
                                data: amt
                            }]
                        },

                    options: {
                        responsive: true,
                        legend: {
                            position: 'left',
                    },


                    title: {
                        display: true,
                        text: 'Example chart'
                        }
                    }
                });



        </script>
    </body>
</html>

如何查看图例中的所有标签？

我的csv文件：

Year,Month,Country,Amount
2019,6,Germany,139
2019,4,Germany,111
2019,2,Germany,70
2019,5,Germany,69
2019,6,Germany,67
2019,3,Germany,65
2019,1,Germany,61
2019,1,Germany,39
2019,1,Italy,11966
2019,5,Italy,2489
2019,1,Italy,2262

Answer 1

如果您的 data.csv 包含以下类型的值：

Year,Month,Country,Amount,Production
2019,6,Germany,139,level1
2019,4,Germany,111,level2
2019,2,Germany,70,level3
2019,5,Germany,69,level4
2019,6,Germany,67,level5
2019,3,Germany,65,level6
2019,1,Germany,61,level7
2019,1,Germany,39,level8
2019,1,Italy,1966,level9
2019,5,Italy,489,level10
2019,1,Italy,262,level11

然后您应该尝试此代码。我认为它将起作用。

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>

<body>
    <canvas id="barchart" width="100%" height="40%"></canvas>
    <script>
        d3.csv("data.csv").then(makechart);

        function getRandomColorHex() {
            var hex = "0123456789ABCDEF",
                color = "#";
            for (var i = 1; i <= 6; i++) {
                color += hex[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function makechart(delivery) {
            var prd = [],
                amt = [],
                alldata = {};
            alldata['datasets'] = [];
            alldata['labels'] = ["labels"];
            delivery.forEach(element => {
                prd.push(element.Production);
                amt.push(element.Amount);

                var sample = {};
                sample['data'] = [element.Amount];
                sample['backgroundColor'] = getRandomColorHex();
                sample['label'] = element.Production;
                alldata['datasets'].push(sample);
            });

            //console.log(alldata['datasets'][0]['backgroundColor']);
            Chart.plugins.register({
                beforeDraw: function (c) {
                    var legends = c.legend.legendItems;
                    //console.log(legends);

                    legends.forEach(function (e,ind) {
                        e.fillStyle = alldata['datasets'][ind]['backgroundColor'];
                    });
                }
            });
            var barchart = new Chart('barchart', {
                type: 'bar', //alldata,
                data:alldata,
                //  {
                //     labels: prd,
                //     datasets: [{
                //         backgroundColor: getRandomColorHex(),
                //         data: amt,
                //         label: 'level1',
                //         fillStyle: '#07C'
                //     }]
                // },

                options: {
                    responsive: true,
                    legend: {
                        position: 'left',
                        fillStyle: getRandomColorHex()
                    },


                    title: {
                        display: true,
                        text: 'Example chart'
                    }
                }
            });
        }
    </script>

</body>

</html>

Chart.js图例未定义

1 个答案: