Question

在使用Chart.js和（https://github.com/leighquince/Chart.js）分叉时，我创建了一个包含3个条形的条形图：目标，实际和可用数据。有没有办法根据实际数据计算可用百分比作为总数？即（可用/实际* 100）=可用百分比我无法尝试访问/调用我的公式中使用的实际数据。目前，该值已硬编码以进行测试。

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: false,
      scaleLabel: function(label) { 
        if (label.value < 1000000) {
          return '$' + (Math.abs(parseInt(label.value))/1.0e+3).toLocaleString().replace(',', '.') + ' K'
        }
        if (label.value >= 1000000) {
          return '$' + (Math.abs(parseInt(label.value))/1.0e+6).toLocaleString().replace(',', '.') + ' M'
        }
      },
      multiTooltipTemplate: function(label) {
         console.log('label: ',label);
         if (label.datasetLabel === "Goal" || label.datasetLabel === "Actual"){
           if (label.value < 1000000) {
              return label.datasetLabel + ': $' + (Math.abs(parseInt(label.value))/1.0e+3).toFixed(3).toLocaleString().replace(',', '.') + ' K'
            }
            if (label.value >= 1000000) {
              return label.datasetLabel + ': $' + (Math.abs(parseInt(label.value))/1.0e+6).toFixed(3).toLocaleString().replace(',', '.') + ' M'
            }
          } 
          if (label.datasetLabel === "Available"){
            return label.datasetLabel + ': ' + Math.round(label.value/889964.49 * 100) + '%'
          }  
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
    });

    this.$el.find('#BAR_INV_LEGEND').html(barOverlayShowroomChart.generateLegend());

  }

Answer 1

所以这是我的解决方案。我是javascript的新手，所以我不确定这是否是最有效的解决方案。我计算了绘制我的图表/画布之外的百分比，然后调用了要在选项部分中使用的数组值以在multiTooltipTemplate中显示。由于multiTooltipTemplate显示根据用户在图表上悬停的位置而变化，因此我添加了几个if语句以显示适当的百分比。

var invAvailData = [500000, 300000]; //sample data
var availPercent = [];
   for (var i=0; i < invAvailData.length; i++) {
       availPercent[i] = Math.round(invAvailData[i]/invDailiesData[i] * 100);
   }

... Previous chart/canvas code from above question goes here. Then the following goes in the options section.

multiTooltipTemplate: function(label) {
            console.log('label: ',label);
            if (label.datasetLabel === "Goal" || label.datasetLabel === "Actual"){
              if (label.value < 1000000) {
                return label.datasetLabel + ': $' + (Math.abs(parseInt(label.value))/1.0e+3).toFixed(3).toLocaleString().replace(',', '.') + ' K'
              }
              if (label.value >= 1000000) {
                return label.datasetLabel + ': $' + (Math.abs(parseInt(label.value))/1.0e+6).toFixed(3).toLocaleString().replace(',', '.') + ' M'
              }
            } 
            if (label.datasetLabel === "Available"){
              if (label.label === "Q1") {
                return label.datasetLabel + ': ' + availPercent[0] + '%'
              }
              if (label.label === "Q2") {
                return label.datasetLabel + ': ' + availPercent[1] + '%'
              }
              if (label.label === "Q3") {
                return label.datasetLabel + ': ' + availPercent[2] + '%'
              } 
              if (label.label === "Q4") {
                return label.datasetLabel + ': ' + availPercent[3] + '%'
              }       
            }  
          },

计算条形图百分比

1 个答案: