Chart.js - 具有多個值的自定義工具提示

Question

我有一個條形圖，我想在將從我的數據庫填充的工具提示框中顯示第二個標籤。你可以從我的下面的代碼中看到，我已經開始設置它，以便可以在工具提示中顯示多個標籤（短，長），並且我希望能夠顯示來自我的數據庫的多個值作爲標籤。

例如，我有一個橋ID爲135554（橋_id_grab），並且該橋是35歲（bridge_age_grab）並位於milepost 13.34（bridge_mp_grab）。

所以，我想這在工具提示爲

顯示 「網橋ID：135554， 橋年齡：35， 里程碑：13.34」

我想我靠近 - 只是想不通了解如何使用bridge_mp_grab獲取一個值 - 它顯示爲數據庫中所有值的字符串。

這裏是我的代碼：

   function Label(short, long) { 
       this.short = short; 
       this.long = long 
      } 
      Label.prototype.toString = function() { 
       return this.short; 
      } 

     var barChartData2 = { 
      //labels : bridge_id_grab, 
      labels: [ 
       new Label("J", bridge_mp_grab), 
       new Label("F", "FEB"), 
       new Label("M", "MAR"), 
       new Label("A", "APR"), 
       new Label("M", "MAY"), 
       new Label("J", "JUN"), 
       new Label("J", "JUL") 
      ], 
      datasets : [ 
       { 
        label: "My First dataset", 
        fillColor : ["rgba(220,220,220,0.5)"], 
        strokeColor : "rgba(151,187,205,1)", 
        pointColor : "rgba(151,187,205,1)", 
        pointStrokeColor : "#fff", 
        data : bridge_age_grab, 
       } 
      ] 
      } 

      var context = document.getElementById('serviceLife').getContext('2d'); 

      window.myObjBar2 = new Chart(context).Bar(barChartData2, { 
       scaleOverride : true, 
       scaleSteps : 10, 
       scaleStepWidth : 10, 
       scaleStartValue : 0, 
       barShowStroke: false, 
       barStrokeWidth : 0, 
       barValueSpacing : 2, 
       customTooltips: function (tooltip) { 
         var tooltipEl = $('#chartjs-tooltip'); 

         if (!tooltip) { 
          tooltipEl.css({ 
           opacity: 0 
          }); 
          return; 
         } 

         // split out the label and value and make your own tooltip here 
         var parts = tooltip.text.split(":"); 
         var re = new RegExp('\b', 'g'); 
         var innerHtml = '<span><b>' + parts[1].trim() + '</b></span>'; 
         tooltipEl.html(innerHtml); 

         tooltipEl.css({ 
          opacity: 1, 
          // the minimum amount is half the maximum width of the tooltip that we set in CSS ... 
          // ... + the x scale padding so that it's not right at the edge 
          left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px', 
          top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px', 
          fontFamily: tooltip.fontFamily, 
          fontSize: tooltip.fontSize, 
          fontStyle: tooltip.fontStyle, 
         }); 
        }, 
       animation: false, 
       responsive: true, 
       tooltipTemplate: "<%if (label){%><%=value%>: <%}%><%= label.long %>", 
       maintainAspectRatio: true, 
       onAnimationComplete: function() { 

        var ctx = this.chart.ctx; 
        ctx.font = this.scale.font; 
        ctx.fillStyle = this.scale.textColor 
        ctx.textAlign = "center"; 
        ctx.textBaseline = "bottom"; 

        this.datasets.forEach(function (dataset) { 
         dataset.bars.forEach(function (bar) { 
          ctx.fillText(bar.value, bar.x, bar.y - 5); 
         }); 
        }) 
       } 
      }); 

      var bars = myObjBar2.datasets[0].bars; 
      for(i=0;i<bars.length;i++){ 
       var color="#07c602"; 
       //You can check for bars[i].value and put your conditions here 

       if(bars[i].value<11){ 
       color="#07c602" 
       }  
       else if(bars[i].value<21){ 
       color="#61e738" 
       }  
       else if(bars[i].value<31){ 
       color="#b6f277" 
       }  
       else if(bars[i].value<41){ 
       color="#ffffb2" 
       }  
       else if(bars[i].value<51){ 
       color="#fed976" 
       }  
       else if(bars[i].value<61){ 
       color="#feb24c" 
       }     
       else if(bars[i].value<71){ 
       color="#fd8d3c" 
       } 
       else if(bars[i].value<81){ 
       color="#fc4e2a" 
       }     
       else if(bars[i].value<91){ 
       color="#e31a1c" 
       } 
       else{ 
       color="#b10026" 
       } 

       bars[i].fillColor = color; 

      } 
      myObjBar2.update(); 

這裏是一對夫婦，我使用作爲參考小提琴的： https://jsfiddle.net/gf3g4b55/ http://jsfiddle.net/tpydnyx6/

Answer 1

我不知道所需的輸出的100％，但這是我的。

總之，當您定義自己的customTooltips時，您將覆蓋選項中指定的默認tooltipTemplate。

因此，刪除customTooltips併爲模板定義輸出格式會產生（我認爲）所需的結果。

整齊地完成輸出，但是，我增加了一個新的對象被稱爲DataPoint並且被定義爲這樣的：

function DataPoint(id, age, milepost) { 
    this.id = id; 
    this.age = age; 
    this.milepost = milepost; 
    this.tooltip = "Bridge ID:" + id + ", Bridge Age: " + age +", Milepost: " + milepost; 
} 

DataPoint.prototype.toString = function() { 
     return this.id; 
}; 

這使我所有必要的數據位包含到一個對象（然後我只操縱那些不是多個陣列）

數組然後，您設置的對象數組作爲Labels爲表

var barChartData2 = { 
     labels: bridgeDataPoints, /* this is the array of DataPoints */ 
     datasets: [{ 
      fillColor: ["rgba(220,220,220,0.5)"], 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      data: bridge_age_grab, 
     }] 
    }; 

最後，tooltipTemplate被定義爲如下：

tooltipTemplate: "<%if (label){%><%=label.tooltip%><%}%>",

這意味着，如果一個標籤存在於每個元件，顯示tooltip屬性它。由於我們將DataPoint元素的tooltip屬性定義爲 this.tooltip = "Bridge ID:" + id + ", Bridge Age: " + age +", Milepost: " + milepost;，因此會獲得所需的輸出。

讓我知道這是否有幫助。

見updated fiddle here