Question

我们正在尝试使用chart.js显示三组数据，两组堆叠，一组未堆叠。我们定义了两组轴，其中只有堆叠的数据显示，而未堆叠的数据则没有。我们只能显示或不显示轴，但我们无法显示数据。

我们知道数据是有效的，因为我们可以将所有数据堆叠在一起，但不能单独存储。

recycleChartData = {
"type":"bar",
"data":{
    "labels":["Mar-2016"],
    "datasets":[
        {
            "label":"benchmark",
            "backgroundColor":"#ff3300",
            "yAxisID":"stacked_testY2",
            "xAxisID":"stacked_testX2",
            "data":["2632.29"]
        },
        {
            "label":"Crossville",
            "backgroundColor":"#009900",
            "yAxisID":"stacked_testY",
            "xAxisID":"stacked_testX",
            "data":["2268.44"]
        },
        {
            "label":"test",
            "backgroundColor":"#ffff00",
            "yAxisID":"stacked_testY",
            "xAxisID":"stacked_testX",
            "data":["181.92"]
        }
    ]
},
"options":{
    "scales":{
        "yAxes":[
            {
                "id":"stacked_testY",
                "position":"left",
                "stacked":true,
                "display":true
            },
            {
                "id":"stacked_testY2",
                "position":"left",
                "stacked":false,
                "display":false
            }
        ],
        "xAxes":[
            {
                "id":"stacked_testX",
                "position":"bottom",
                "stacked":true,
                "display":true
            },
            {
                "id":"stacked_testX2",
                "position":"bottom",
                "stacked":false,
                "display":false
            }
        ]
    }
}

};

Answer 1

奇怪的是，如果您将非堆叠数据集更改为线图，则您的代码无法正常工作！也许值得在chartjs github上发布一个问题。

但是...

在2.5.0中发布了一个允许这种情况的功能。有关它的内容的更多信息可以在这里阅读，https://github.com/chartjs/Chart.js/issues/2643。

基本上，您可以在每个数据集上添加一个新属性stack，以表示您希望它继续使用哪个堆栈，因此，例如，使用您的数据，您可以删除额外的比例并拥有2个堆栈

var config = {
  "type": "bar",
  "data": {
    "labels": ["Mar-2016","Apr-2016"],
    "datasets": [ {
      "label": "Crossville",
      "backgroundColor": "#009900",
      "data": ["2268.44","2268"],
      stack: 2,
    }, {
      "label": "test",
      "backgroundColor": "#ffff00",
      "data": ["181.92","181.92"],
      stack: 2
    },{
      "label": "benchmark",
      "type": "bar",
      "backgroundColor": "#ff3300",
      "data": ["2632.29","2632.29"],
      stack: 1
    }]
  },
  "options": {
    "scales": {
      "yAxes": [{
        "id": "stacked_testY",
        "type": 'linear',
        "position": "left",
        "stacked": true,
        "display": true
      }],
      "xAxes": [{
        "position": "bottom",
        "stacked": true,
        "display": true
      }]
    }
  }
};
var chartElement = document.getElementById('chart');
var chart = new Chart(chartElement, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:75%;">
  <canvas id="chart"></canvas>
</div>

如何在Chart.js中一起显示堆叠和未堆叠的条形图

1 个答案: