Question

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

例如，我的网桥ID为135554（bridge_id_grab），该网桥为35年（bridge_age_grab），位于里程碑13.34（bridge_mp_grab）。

所以我希望它在工具提示中显示为

＆＃34; Bridge ID：135554，桥龄：35岁，里程碑：13.34＆＃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;获得所需的输出。

如果有帮助，请告诉我。

请参阅updated fiddle here

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

1 个答案: