如何在jqplot图表的区域上显示值,而不是百分比

How to show the values on the regions of the jqplot chart instead of percentage

本文关键字:显示 百分比 区域 jqplot      更新时间:2023-09-26

我有如下javascript代码:

var plot1 = jQuery.jqplot ('chartdiv', [data], 
{ 
  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.
          showDataLabels: true,
          dataLabels: 'value'
        }
  }, 
  legend: { show:true, location:'e'}
});

var handler = function(ev, gridpos, datapos, neighbor, plot) { 
    if (neighbor) { 
        alert('x:' + neighbor.data[0] + ' y:' + neighbor.data[1]); 
    }
}; 
$.jqplot.eventListenerHooks.push(['jqplotClick', handler]); 

现在,通过使用dataLabels:'value',我可以显示值,但显示的值是51,而不是50.667。值是四舍五入的。但我需要显示出确切的价值。怎么做到的??

我的第二个问题是,当我把鼠标指针放在图表的任何区域时,我都想显示一些东西。这会使用jqplotDataMouseOver完成吗?但是如何使用它?

您的第一个问题可以用dataLabelFormatString属性解决:

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.
          showDataLabels: true,
          dataLabels: 'value',
          dataLabelFormatString:'%.4f'
        }
  }, 

'%.4f'将显示小数点后4位。

你的第二个问题比较难。显然,条形图上的事件并没有用jqplot完全解决。但该链接中的最后一个建议对我有效:

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

这里有一个jsfiddle,记住要缓存JS文件,因为jqplot不允许热链接。