仅覆盖条形图中的某些条形图

时间:2015-03-18 21:19:23

标签: javascript jquery charts chart.js

在使用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
        }  
      },}),

0 个答案:

没有答案