自定义栏位于特定位置图表js

Question

我正在使用'chart.js'

绘制图表

http://jsfiddle.net/6bjy9nxh/311/

var barData = {
  labels: ['Italy' ,'UK', 'USA', 'Germany', 'France', 'Japan'],
  datasets: [
  {
    label: '2010 customers #',
    fillColor: '#382765',
    data: [2500,50, 1902, 1041, 610, 1245, 952]
  }
]
};

var context = document.getElementById('clients').getContext('2d'); 
var clientsChart = new Chart(context).Bar(barData);

然后我想添加一个'自定义'栏，从第二个标签和1000个高度开始（在另一个栏的顶部（阻止其中一些））

示例：

有没有简单的方法来完成这个而不重写第三个chartjs插件？

可能将条形颜色分成两个？

Answer 1

使用Chart.js 2.x，您可以使用堆积图表来解决您的问题。

查看documentation或已修改的更新代码以获取更多详细信息。

var barData = {
  type: 'bar',
  data: {
    labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
    datasets: [{
      label: '2010 customers #',
      backgroundColor: '#382765',
      data: [2500, 1000, 1041, 610, 1245, 952]
    }, {
      label: 'Dataset 2',
      backgroundColor: '#000',
      data: [0, 1248, 0, 0, 0, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }]
    }
  }
}

var ctx = document.getElementById("clients").getContext("2d");
new Chart(ctx, barData);

<canvas id="clients" width="500" height="350"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>