自定義欄特定位置圖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>