如何在jqplot中的饼图外显示标签? [英] How to display the labels outside the pie chart in jqplot?

查看:92
本文介绍了如何在jqplot中的饼图外显示标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Jqplot的图表如下所示

Jqplot has the chart like following

jqplot图表

我的问题是如何在jqplot chart之外显示标签,如以下high chart

my question is how to display the labels outside a jqplot chart like the following high chart,

高位图可在此处小提琴

最高图表

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

如何使用 jqplot 中的线在图表外部显示标签?

How to achieve displaying labels outside the chart with lines in jqplot?

推荐答案

dataLabelPositionFactor 控制标签在切片上的位置.增大将标签滑向饼图的边缘,减小将标签滑向饼图的中心.

dataLabelPositionFactor controls position of label on slice. Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.

dataLabelPositionFactor:1.2,

默认 dataLabelThreshold 值为3,因此不显示值<== 3,因此将其设置为0

default dataLabelThreshold value is 3, hence values <=3 are not displayed hence make it to 0

dataLabelThreshold:0

 $(document).ready(function(){
  var data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
  ];
  var plot1 = jQuery.jqplot ('chart1', [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, 
         //dataLabelPositionFactor controls position of label on slice.  Increasing will slide label toward edge of pie, decreasing will slide label toward center of pie.
         dataLabelPositionFactor : 1.2,
         // default dataLabelThreshold  value is 3,  hence values <=3 are not displayed hence make it to 0
         dataLabelThreshold : 0
        }
      }, 
      legend: { show:true, location: 'e' }
    }
  );
});

这篇关于如何在jqplot中的饼图外显示标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆