Customize and create multiple line of tooltips in bar chart

问题

I have try the code from the answer of potatopeelings in the Customize different tooltips of bar chart, but chart.js seems doesn't work under jquery mobile.

Following is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8"/>

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  <script src="Chart.js"></script>

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

      var ctx = $("#myChart").get(0).getContext("2d");

      var data = {
        labels: [ 
          new Label("J", "S JAN\b JAN JAN JAN JAN JAN JAN E"),
          new Label("F", "S FEB\b E"), 
          new Label("M", "S MAR\b E"),
          new Label("A", "S APR\b APR APR APR APR APR APR E"),
          new Label("M", "S MAY\b E"),
          new Label("J", "S JUN\b E"),
          new Label("J", "S JUL\b JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL E")
        ],
        datasets: [{
          label: "My First dataset",
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        }]
    };

    var myLineChart = new Chart(ctx).Bar(data, {
      tooltipTemplate: "<%if (label){%><%=label.long%>: <%}%><%= value %>",
      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>' + parts[0].trim().replace(re, '<br/>') + '</span> : <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,
        });
      }
    });
  }
  </script>

  <style>
  #chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, -120%);
    transform: translate(-50%, -120%);
    max-width: 30px;
  }
  </style>

  </head>

  <body>

  <div id="container" data-role="page"> 
    <div id="header" data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="c">
      <h1>TEST</h1>
    </div>
    <div data-role="content" class="ui-content">
      <canvas id="myChart" width="400" height="200"></canvas>
      <div id="chartjs-tooltip"></div>
      <input type="button" value="Review" onclick="Plot()">
    </div>
  </div>

  </body>
</html>

Is there any idea?

Thanks a lot.

来源：https://stackoverflow.com/questions/34460243/customize-and-create-multiple-line-of-tooltips-in-bar-chart

标签

jquery-mobile

chart.js