【问题标题】:How to display the labels outside the pie chart in jqplot?jqplot如何在饼图外显示标签?
【发布时间】:2014-01-30 04:51:24
【问题描述】:

jqplot 有如下图表

jqplot Chart

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

高位图表可在此处获得fiddle

排行榜

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

jqplot中如何实现在图表外显示带有线条的标签?

【问题讨论】:

  • 我不明白你的问题?你需要什么? jsfiddle 可以作为您的图像使用吗?
  • @Nouphal.M 如何在图表外部显示 jqplot 中的标签?这是我的问题。
  • 喜欢你的第二张照片吗?
  • @Nouphal.M 是这样的
  • 您提供的 jsfiddle 已经绘制了这样的图表。您想知道这是如何实现的吗?

标签: javascript jquery css jqplot


【解决方案1】:

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

dataLabelPositionFactor:1.2,

默认 dataLabelThreshold 值为 3,因此值

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' }
    }
  );
});

【讨论】:

  • 设置后添加饼图的图片结果。
【解决方案2】:

我使用以下设置将图例放在饼图之外,它对我有用:

legend: {show: true, location: 'ne',placement: 'outside'},

【讨论】:

    【解决方案3】:

    我想你要找的是this page.

    查看 dataLabels 子标题下的信息。

    【讨论】:

    • 能否请您详细说明您的答案,添加更多关于您提供的解决方案的描述?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-06-29
    • 1970-01-01
    相关资源
    最近更新 更多