javascript - 特定位置图表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>