1

Flot char で次のコードを試して、グラフを描画しました。グラフは期待どおりにプロットされていますが、ツールチップではありません

$(function() {

  var data = [
    ["Aug 06", 2],
    ["Aug 07", 1],
    ["Aug 08", 1.5],
    ["Aug 09", 0],
    ["Aug 10", 0],
    ["Aug 11", 0],
    ["Aug 12", 0]
  ];
  var options = {

    series: {
      lines: {
        show: true,
        lineWidth: 1,
        fill: true,
        fillColor: {
          colors: [{
            opacity: 0.5
          }, {
            opacity: 0.2
          }]
        }
      },
      points: {
        show: true,
        lineWidth: 2
      },
      shadowSize: 0
    },
    grid: {
      hoverable: true,
      clickable: true,
      tickColor: "#eeeeee",
      borderWidth: 0,
      hoverable: true,
      clickable: true
    },
    tooltip: true,
    tooltipOpts: {
      content: "Your sales for <b>%x</b> was <span>$%y</span>",
      defaultTheme: false
    },
    xaxis: {
      mode: "categories",
      tickLength: 0
    },
    yaxis: {
      min: 0
    },
    selection: {
      mode: "x"
    }
  };
  $.plot("#section-chart", [data], options);

  // Add the Flot version string to the footer

  $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});
#section-chart {
  width: 600px;
  height: 300px;
}
<link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"></script>


<div id="section-chart" class="demo-placeholder"></div>

値にカーソルを合わせると、ツールチップに「 %xの売り上げは $2 でした」と表示 Your sales for Aug 06 was $2されます。私がこれで間違ったこと。親切にアドバイス ？

4

2 に答える 2