Расчет гистограммы Процент

Question

При использовании Chart.js и (https://github.com/leighquince/Chart.js) fork, я создал гистограмму с 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] + '%' 
       }  
      } 
      },