如何在jqplot中显示饼图外的标签?

时间:2014-01-30 04:51:25

标签: javascript jquery css jqplot

Jqplot的图表如下:

enter image description here

jqplot Chart

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

enter image description here

高图表可在此处fiddle

获取

高图

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

如何使用 jqplot 中的行显示图表外的标签?

3 个答案:

答案 0 :(得分:3)

dataLabelPositionFactor 控制标签在切片上的位置。增加将标签滑向饼的边缘,减少将标签滑向饼的中心。

dataLabelPositionFactor:1.2,

默认 dataLabelThreshold 值为3,因此不显示值&lt; = 3因此将其设为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' }
    }
  );
});

enter image description here

答案 1 :(得分:0)

我使用以下方法将图例放在饼图外面,它对我有用

图例:{show:true,location:'ne',placement:'outside'},

答案 2 :(得分:-1)

我认为你要找的是this page.

查看dataLabels子标题下的信息。