在使用Chart.js和(https://github.com/leighquince/Chart.js)分叉时,我创建了一个包含3个条形的条形图:目标,实际和可用数据。有没有办法只覆盖实际数据上的可用数据,同时单独留下目标数据栏?我尝试为overlayBars选项创建一个函数,但它不起作用。结果将所有3个栏叠加在一起。
var barShowroomCtx = this.$el.find('#SHOWROOM_INV_CANVAS').get(0).getContext("2d");
var barShowroomOverlayData = {
labels: ["Q1", "Q2", "Q3", "Q4"],
datasets: [
{
label: "Goal",
type: "bar",
fillColor: "rgba(255, 198, 108, 1)", // yellow #FFC66C
strokeColor: "rgba(255, 198, 108, 1)",
highlightFill: "rgba(255, 198, 108, 1)",
highlightStroke: "rgba(255, 198, 108, 1)",
data: invGoalsData //Goal data
},
{
label: "Actual",
type: "bar",
fillColor: "rgba(40, 183, 121, 1)", //bright green #28B779
strokeColor: "rgba(40, 183, 121, 1)",
highlightFill: "rgba(40, 183, 121, 1)" ,
highlightStroke: "rgba(40, 183, 121, 1)",
data: invDailiesData // Actual data
},
{
label: "Available",
type: "bar",
fillColor: "rgba(153, 114, 181, 1)", //purple #9972B5
strokeColor: "rgba(153, 114, 181, 1)",
highlightFill: "rgba(153, 114, 181, 1)",
highlightStroke: "rgba(153, 114, 181, 1)",
data: invAvailData, //Available data
}
]
};
// This will get the first returned node in the jQuery collection.
var barOverlayShowroomChart = new Chart(barShowroomCtx).Overlay(barShowroomOverlayData, {
barValueSpacing : 7,
populateSparseData: true,
datasetFill: false,
overlayBars: function(label) {
if (label.datasetLabel === "Goal"){
return false
} else {
return true
}
},}),