Question

我在 Customize different tooltips of bar chart 中尝试了 potatopeelings 的答案，但chart.js似乎在jquery mobile下无法运行。

以下是我的代码：

<!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>

有什么想法吗？

非常感谢。

在条形图中自定义并创建多行工具提示

0 个答案: