Chartjs-堆积的条形图阻止其他值 [英] Chartjs - Stacked bar chart blocking other values

问题描述

我的问题是图表js根据数据集上定义的顺序渲染条形图.如下所示，数组索引0处的值为 2500 和 1000 .由于首先通过了2500，所以这将阻止1000值的条形图.

My problem is that chart js is rendering the bar chart based on the order defined on the dataset. As you can see below, the values at index 0 of the arrays are 2500 and 1000. Since the 2500 was passed first, this will block the bar chart of the 1000 value.

https://jsfiddle.net/6bjy9nxh/352/

var barData = {
labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
datasets: [
    {
        label: '2010 customers #',
        fillColor: '#382765',
        data: [2500, 1902, 1041, 610, 1245, 952]
    },
    {
        label: '2014 customers #',
        fillColor: '#7BC225',
        data: [1000, 1689, 1318, 589, 1199, 1436]
    }
]

推荐答案

根据Chartjs的堆积条形图示例 stacked:true ，同时用于 xAxes 和轴

As Per the example of Chartjs for Stacked bar chart stacked: true for both xAxes and Axes

var barData = {
    labels : ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
    datasets : [{
        label : '2010 customers #',
        backgroundColor : '#382765',
        data : [2500, 1902, 1041, 610, 1245, 952]
    }, {
        label : '2014 customers #',
        backgroundColor : '#7BC225',
        data : [1000, 1689, 1318, 589, 1199, 1436]
    }]
};

var context = document.getElementById('clients').getContext('2d');
var clientsChart = new Chart(context, {
    type : 'bar',
    data : barData,
    options : {
        scales : {
            xAxes : [{
                stacked : true,

            }],
            yAxes : [{
                stacked : true
            }]
        }
    }
});

这可能会对您有所帮助.小提琴

This may help you. Fiddle

这篇关于Chartjs-堆积的条形图阻止其他值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！