Chart.js-具有多个值的定制工具提示

Question

我有一个条形图，我想在工具提示框中显示第二个标签，该标签将从数据库中填充。您可以从下面的代码中看到我已经开始进行设置，以便可以在工具提示中显示多个标签（短，长），并且我希望能够将来自数据库的多个值显示为标签。

例如，我的桥ID为135554（bridge_id_grab），而该桥已有35年的历史（bridge_age_grab），位于里程碑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属性。由于我们tooltip为DataPoint元素 定义了属性，this.tooltip = "Bridge ID:" + id + ", Bridge Age: " + age +", Milepost: " + milepost; 因此获得了所需的输出。

让我知道是否有帮助。

在这里查看更新的小提琴