1

我使用 JQplot 绘制了一些图表。现在当我将鼠标悬停在条形图中的各个条上时，应该显示一些值..请帮助

我的图表如下...

$(document).ready(function(){
  var line1 = [['Content Of The Training', 2.2], ['Relavance Of Training To The Work Place', 3.5], ['Phase Of The Training', 3.2], 
  ['Session Met The Objectives Stated', 3.4], [' The Session Met My Exceptations', 3], 
  ['Overall Ratining On the Training', 3.6]];

  var plot1 = $.jqplot('graph1', [line1], {
    title: 'Rating On Training',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
        fontFamily: 'Calibri',
          angle: -30,
          fontSize: '10pt'
        }
    },

    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer
      }
    },
        canvasOverlay: {
      show: true,
      objects: [
        {horizontalLine: {
          name: 'pebbles',
          y: 2.5,
          lineWidth: 2,
          color: 'rgb(255, 0, 0)',
          shadow: true,
          lineCap: 'butt',
          xOffset: 0
        }},

      ]
    }
  });
});

对于插件，从以下链接下载 jplot

http://www.jqplot.com/tests/bar-charts.php

4

1 回答 1

0

您可以使用jqplotDataMouseOver事件。

这里的文档：http ://www.jqplot.com/deploy/dist/examples/barTest.html

#info此示例使用有关您单击的栏的信息填充容器。您应该能够从ev参数中获取鼠标坐标并使用它。

$('#graph1').bind('jqplotDataMouseOver', 
     function (ev, seriesIndex, pointIndex, data) {
                $('#info').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
     }
);

你也可以看看这个： http ://www.jqplot.com/docs/files/plugins/jqplot-highlighter-js.html

它显示了如何启用工具提示。我不确定它是否适用于各种图表。

于 2012-12-05T15:50:22.413 回答