Question

我尝试在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： [{ “代码”： “CODE01”， “值”： “1”}，{ “代码”： “CODE02”， “值”： “3”}]

在饼图中，我想显示值，当鼠标超过切片时，我想在工具提示中显示代码。

我在哪里使用荧光笔活动？我尝试使用seriesDefaults body - 在rendererOptions之后但是我可能使用了错误的选项......

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

Answer 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',
}

jqPlot饼图荧光笔

1 个答案: