複数の値を持つカスタムツールチップ。あなたは、複数のラベルをツールチップで表示することができるように、私は(短い長い)それを設定し始めているとも、私はラベルとして私のデータベースから複数の値を表示できるようにしたいという以下の私のコードから見ることができます。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/
あなたは私たちがして作業するためのフィドルを作成することができますを参照してください?します。https:// jsfiddle - 遅延のため – ochi
申し訳ありませんが、私はそれがフィドルに動作させるためにしなければならなかった原料の束を持っていました。net/s8yfqvdc/ – dchadney
遅れて申し訳ありません...仕事で忙しかったです...あなたが投稿したフィドルには多くの問題がありました...私はまもなく回答を追加しますが、ここで更新されたフィドルを見ることができますhttp:///jsfiddle.net/s8yfqvdc/6/ – ochi