Jquery mobile 自定义并在条形图中创建多行工具提示_Jquery Mobile_Chart.js

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

jquery-mobile chart.js

Jquery mobile 自定义并在条形图中创建多行工具提示,jquery-mobile,chart.js,Jquery Mobile,Chart.js,我已经尝试了中的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

我已经尝试了中的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>


函数图（）{
功能标签（短、长）{
这个。短=短；
this.long=长
}
Label.prototype.toString=函数（）{
把这个还给我；
}
var ctx=$（“#myChart”）.get（0.getContext（“2d”）；
风险值数据={
标签：[
新标签（“J”、“S-JAN\b-JAN-E”），
新标签（“F”、“S-FEB\b-E”），
新标签（“M”、“S MAR\b E”），
新标签（“A”、“S APR\b APR E”），
新标签（“M”、“S可能\b E”），
新标签（“J”、“S JUN\b E”），
新标签（“J”、“S-JUL\b-JUL-JUL-JUL-JUL-JUL-JUL-JUL-JUL-JUL-JUL-JUL-JUL-JUL-E”）
],
数据集：[{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
}]
};
var myLineChart=新图表（ctx）.Bar（数据{
ToolTiptTemplate:“：”，
自定义工具提示：函数（工具提示）{
var tooltipEl=$（“#chartjs工具提示”）；
如果（！工具提示）{
工具管道({
不透明度：0
});
返回；
}
//拆分标签和值，并在此处创建自己的工具提示
var parts=tooltip.text.split（“：”）；
var re=new RegExp（'\b'，g'）；
var innerHtml=''+parts[0].trim（）.replace（re'
'）+'：''+parts[1].trim（）+''；
html（innerHtml）；
工具管道({
不透明度：1，
//最小值是我们在CSS中设置的工具提示最大宽度的一半。。。
//…+x刻度填充，使其不在边缘
左：Math.max（75+10，tooltip.chart.canvas.offsetLeft+tooltip.x）+“px”，
顶部：tooltip.chart.canvas.offsetTop+tooltip.y+'px'，
fontFamily:tooltip.fontFamily，
fontSize:tooltip.fontSize，
fontStyle:tooltip.fontStyle，
});
}
});
}
#chartjs工具提示{
不透明度：0；
位置：绝对位置；
背景：rgba（0,0,0,7）；
颜色：白色；
填充：3倍；
边界半径：3px；
-webkit过渡：所有.1s易用性；
过渡：全部1秒轻松；
指针事件：无；
-webkit转换：翻译（-50%，-120%）；
转换：翻译（-50%，-120%）；
最大宽度：30px；
}
试验

有什么想法吗

非常感谢。

您看到任何错误吗？这对我来说很好用。如果您试图在本地测试它，请检查@potatopeelings是否存在任何错误。它可以绘制和显示图表，但多行工具提示似乎没有用。这个代码对你有用吗？