如何使用Chart.js版本2.0.0-beta创建堆积图表

时间:2016-04-07 20:32:18

标签: chart.js

我在使用上述版本创建和显示堆积条形图时遇到了一些麻烦。文档没有解释这个主题。

任何人都有一个有用的想法?



var data = {
    "labels": [
      "10/7/15", 
      "10/8/15", 
      "10/9/15", 
      "10/13/15", 
      "10/14/15", 
      "10/15/15", 
      "10/16/15"
    ],
    "datasets": [{
      "label": "Cash",
      "backgroundColor": "blue",
      "data": [
        "100000", 
        "150000", 
        "120000", 
        "140000", 
        "90000", 
        "110000", 
        "130000"
      ]
    }, {
      "label": "Credit",
      "backgroundColor": "green",
      "data": [
        "20000",
        "-10000",
        "200000",
        "-110000",
        "99500",
        "-100000",
        "11000"
      ]
    }]
  };

  var options = {
    responsive: true,
    datasetFill: false,
    scales: {
      xAxes: [{
        stacked: true,
        barPercentage: 0.8
      }]
    },
  };
  var ctx = $('#bar_chart').get(0).getContext('2d');
  var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.min.js"></script>
<canvas id="bar_chart" width="470" height="200">
</canvas>
&#13;
&#13;
&#13;

http://nnnick.github.io/Chart.js/docs-v2/#bar-chart处的文档表明&#34;堆积:真&#34;应该在xAxes值上设置,这是我做的无效。

1 个答案:

答案 0 :(得分:-1)

好的,明白了。看起来我需要堆叠:两个轴都是真的,X和Y.