带有悬停在线效果的Jqplot折线图答案

【问题标题】：Jqplot Line Graph with hover on line effect带有悬停在线效果的Jqplot折线图
【发布时间】：2013-01-14 12:31:14
【问题描述】：

我有 jqplot 折线图，其中 y 轴为金额，x 轴为日期。我需要详细说明将鼠标悬停在图表线上时显示的金额。如果有人知道请重播。谢谢....

【问题讨论】：

【解决方案1】：

您尝试过 Highlighter 插件吗？

http://www.jqplot.com/deploy/dist/examples/cursor-highlighter.html

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />

$(document).ready(function(){
var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
  ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
  ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
 var plot1 = $.jqplot('chart1', [line1], {
  title:'Data Point Highlighting',
  axes:{
    xaxis:{
      renderer:$.jqplot.DateAxisRenderer,
      tickOptions:{
        formatString:'%b&nbsp;%#d'
      } 
    },
    yaxis:{
      tickOptions:{
        formatString:'$%.2f'
        }
    }
  },
  highlighter: {
    show: true,
    sizeAdjust: 7.5
  },
  cursor: {
    show: false
  }
 });
});

【讨论】：