jqPlot饼图荧光笔-Java 学习之路

我尝试在我的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 body - 在rendererOptions之后但是我可能使用了错误的选项......

请帮帮我，对不起我的英语 . 关心Łukasz

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

回复于 2024-05-11T03:17:00+08:00

jqPlot饼图荧光笔

1 回答

相关问题