jqPlot 饼图荧光笔答案

【问题标题】：jqPlot Pie Chart highlighterjqPlot 饼图荧光笔
【发布时间】：2014-11-19 12:08:27
【问题描述】：

我尝试在我的 jsp 项目中使用 jqPlot。我需要绘制饼图。有了饼图，一切正常，一切正常。

然后我想在光标位于切片上时显示带有一些数据的工具提示。对于这些，我可以使用 jqPlot 提供的荧光笔，但我不知道该怎么做。

在 .jsp 文件中，我包含 <script language="JavaScript"src="../../common/jsc/plugins/jqplot.highlighter.min.js"></script>

我的 javascript 代码：

$(document).ready(function(){
  var url = 'supplyCalendarDayDetailsCharts.jsp?date=' + getEl('date').value + '&action=COG';
  $.ajax({
    url: url,
    type: "GET",
    dataType: "json",
    success: function(data) {
      var dataTmp = [];
      for (var i in data) {
        var dataPush = [data[i].cp_code, parseInt(data[i].value)];
        dataTmp.push(dataPush);
      }
        var plot1 = jQuery.jqplot('chartdiv', [dataTmp], 
          { 
            seriesDefaults: {
              // Make this a pie chart.
              renderer: jQuery.jqplot.PieRenderer, 
              rendererOptions: {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                dataLabels: 'value',
                showDataLabels: true
              }
            } 
          }
        );
    }
  });
});

使用 AJAX，我得到这样的 json： [{"code":"CODE01","value":"1"},{"code":"CODE02","value":"3"}]

在饼图中，我想显示 value，当鼠标悬停在切片上时，我想在工具提示中显示 code。

我应该在哪里使用荧光笔事件？我在 seriesDefaults 正文中尝试过 - 在 rendererOptions 之后，但也许我使用了错误的选项...

请帮助我，对不起我的英语。问候乌卡斯

【问题讨论】：

标签： jquery jsp jqplot

【解决方案1】：

需要添加插件：

<script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>

您需要添加设置：

cursor: {
    style: 'pointer',     // A CSS spec for the cursor type to change the
                            // cursor to when over plot.
    show: true,
    showTooltip: false,      // show a tooltip showing cursor position.
},


highlighter: {
  show: true,
  useAxesFormatters: false,
  tooltipLocation:'n',
  tooltipSeparator:', ',
  tooltipFormatString: '%s%d',
  fadeTooltip:'fast',
}

【讨论】：