Question

简单的堆积条形图

<head>
    <title>Stacked Bar Chart</title>
    <script src="Chart.bundle.js"></script>
    <script src="utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width: 75%">
        <canvas id="canvas"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
    <script>
     chartColors = {
      redborder: 'rgba(206, 0, 23, 1)',
      darkredborder: 'rgba(206, 0, 23, 0.75)',
      lightredborder: 'rgba(206, 0, 23, 0.5)',
             };
        var barChartData = {
            labels: [1<img src='images/badges/Manchester United.png' alt='Manchester United.png' height='30' width='30'>,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
            datasets: [{
                label: 'Goals',
                backgroundColor: window.chartColors.redborder,
                data: [0,1,3,0,2,0,0,2,0,1,0,1,1,0,0,1,0,0,2,1,0,1,2,1,1,0,0,0,2,2,0,3]
            }, {
                label: 'Assists',
                backgroundColor: window.chartColors.darkredborder,
                data: [0,0,1,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,1]
            }, {
                label: 'Indirect',
                backgroundColor: window.chartColors.lightredborder,
                data: [0,0,1,0,0,0,0,0,1,1,0,1,0,0,1,0,0,0,1,1,0,1,2,0,0,0,1,0,0,0,0,1]
            }]

        };
        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }
            });
        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            barChartData.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return randomScalingFactor();
                });
            });
            window.myBar.update();
        });
    </script>
</body>

</html>

在x轴标签中，我试图显示一个小图标（图像）而不是数字。我试图将图片标记放在"和'的所有可能组合以及数字中。但无济于事。图表无法呈现。看起来标签需要被识别为要渲染的值，并且html标签会将其标记为不合适。我不明白为什么不能把图像标签放在那里，有办法吗？

有没有办法将图像放入条形图的图例（chart.js）？

0 个答案: