2016-04-27 25 views
1

複数の値を持つカスタムツールチップ。あなたは、複数のラベルをツールチップで表示することができるように、私は(短い長い)それを設定し始めているとも、私はラベルとして私のデータベースから複数の値を表示できるようにしたいという以下の私のコードから見ることができます。Chart.js - 私は私のデータベースから移入されるツールチップボックスの2のラベルを表示する棒グラフを持って

たとえば、ブリッジIDが135554(bridge_id_grab)で、そのブリッジが35歳(bridge_age_grab)で、milepost 13.34(bridge_mp_grab)にあります。

だから私は

は "ブリッジID:135554、 橋年齢:35、 Milepost: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/

+0

あなたは私たちがして作業するためのフィドルを作成することができますを参照してください?します。https:// jsfiddle - 遅延のため – ochi

+0

申し訳ありませんが、私はそれがフィドルに動作させるためにしなければならなかった原料の束を持っていました。net/s8yfqvdc/ – dchadney

+0

遅れて申し訳ありません...仕事で忙しかったです...あなたが投稿したフィドルには多くの問題がありました...私はまもなく回答を追加しますが、ここで更新されたフィドルを見ることができますhttp:///jsfiddle.net/s8yfqvdc/6/ – ochi

答えて

4

私は、所望の出力の100%を確認していないが、これはあります私のテイク。

つまり、独自のcustomTooltipsを定義すると、オプションに指定されているデフォルトのtooltipTemplateが上書きされます。

ので、(私は思う)望ましい結果が得られcustomTooltipsを削除し、テンプレートの出力形式を定義します。

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; 
}; 

これは私が1つのオブジェクトに必要なすべてのデータビットを含むように(そして私が唯一の操作ができます:

はきちんと出力を達成するために、しかし、私は、新しいオブジェクトがDataPointと呼ばれ、このように定義を追加しました代わりに、複数のアレイのそれらの配列)

はその後、あなたはあなたのテーブルのための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プロパティを表示することを意味します。我々は this.tooltip = "Bridge ID:" + id + ", Bridge Age: " + age +", Milepost: " + milepost;として私達のDataPoint要素のためtooltipプロパティを定義しているので所望の出力が得られます。

これが役立つかどうか教えてください。

updated fiddle here

+1

これは完璧です。これは私が達成しようとしていたものです。 – dchadney

+0

あなたは大歓迎です!私は助けることができるとうれしいです – ochi

+0

驚くばかりの答え!多くのありがとう – Kop4lyf

関連する問題