Question

我正在使用charts.js来显示数据。我已经设置好了它。

但是，我已经阅读了所有文档，无法弄清楚如何解决我想要实现的目标。

目前，data包含三个数字[12, 19, 3]。这是得分的实际目标数。但是，也有关于得分目标数量的预测。根据我拥有的数据，该值总是会减少。所以得分的预期目标是[8, 11, 1]。这些与第一组相对应。

无论如何要将两个值组合在同一个栏中。因此，在第一个栏中，它将达到8，作为预期的目标数，然后栏的顶部将显示实际的目标数。

以下是我的代码。

希望我的问题有道理

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [{
                label: '# of Goals',
                data: [12, 19, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

＆＃13;

		var ctx = document.getElementById("myChart");
		var myChart = new Chart(ctx, {
		    type: 'bar',
		    data: {
		        labels: ["Red", "Blue", "Yellow"],
		        datasets: [{
		            label: '# of Likes',
		            data: [12, 19, 3],
		            backgroundColor: [
		                'rgba(255, 99, 132, 0.2)',
		                'rgba(54, 162, 235, 0.2)',
		                'rgba(255, 206, 86, 0.2)'
		            ],
		            borderColor: [
		                'rgba(255,99,132,1)',
		                'rgba(54, 162, 235, 1)',
		                'rgba(255, 206, 86, 1)'
		            ],
		            borderWidth: 1
		        }]
		    },
		    options: {
		    	responsive: false,
		        scales: {
		            yAxes: [{
		                ticks: {
		                    beginAtZero:true
		                }
		            }]
		        }
		    }
		});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

＆＃13;

Answer 1

版本2确实支持堆积条形图。

https://jsfiddle.net/r71no58a/10/

   scales: {
        xAxes: [{
            stacked: true,
        }],
        yAxes: [{
            stacked: true,
            ticks: {
                beginAtZero: true
            }
        }]
   }

Chart.js将两个数据组合成一个条形

1 个答案: