jqPlot饼图数据标签未显示

时间:2013-05-23 08:40:24

标签: javascript jquery jqplot

我有这样的饼图
其数据标签的值为[“”,20,1,3,“”,“”,“”,“”,4,6,6], 它显示所有值没有任何问题,除了它没有显示值1。 我该如何修复它还是jqPlot bug?

enter image description here

我的代码是:

function getPieChart(res) {
    var data = [];
    $.each(res, function (ind, resData) {
        data.push([resData.Stage, resData.Count]);
    });
    var dataLbl = [];
    for (var i = 0; i < data.length; i++) {
        if (data[i][1] != 0) {
            dataLbl.push(data[i][1]);
        }
        else {
            dataLbl.push('');
        }
    }
    var piePlot = jQuery.jqplot('pie-chart', [data],
      {
          seriesDefaults: {
              renderer: jQuery.jqplot.PieRenderer,
              rendererOptions: {
                  showDataLabels: true,
                  dataLabels: dataLbl,
                  diameter: 250,
                  dataLabelPositionFactor: 0.5,
                  sliceMargin: 3,
                  color: '#DCDCDC'
              },
              shadow: false
          }
      }
    );
}

3 个答案:

答案 0 :(得分:4)

我不知道你是否可以解决这个问题,但问题是dataLabelThreshold设置

默认情况下,其值为3,因此不会显示低于此值的任何内容

尝试将其值设置为零(范围为0-100),如此

rendererOptions: { 
   dataLabelThreshold: 0, 
   showDataLabels: true, 
   dataLabels: labels, 
   dataLabelFormatString: "%s" 
}

答案 1 :(得分:1)

默认情况下,标签会显示百分比,但如果将dataLabels属性设置为label,则应显示数据[]中传递的标签。将标签放入新数组的代码是不必要的。请参阅文档中的第三个示例:http://www.jqplot.com/tests/pie-donut-charts.php

 var piePlot = jQuery.jqplot('pie-chart', [data],
  {
      seriesDefaults: {
          renderer: jQuery.jqplot.PieRenderer,
          rendererOptions: {
              showDataLabels: true,
              dataLabels: 'label', //specify to use labels
              diameter: 250,
              dataLabelPositionFactor: 0.5,
              sliceMargin: 3,
              color: '#DCDCDC'
          },
          shadow: false
      }
  }
);

此外,您似乎已经使用data构建了[[]]。我不认为这应该进一步包含在数组中。

var piePlot = jQuery.jqplot('pie-chart', data,
      {
        //ommitted
      }

答案 2 :(得分:0)

其他人已经声明您需要将dataLabelThreshold设置为0。我想补充一点,您还应该将dataLabelPositionFactor设置为类似1.1的值,以使该值清晰可见。

rendererOptions: { 
   dataLabelThreshold: 0, 
   dataLabelPositionFactor: 1.1,
}

请参阅相关问题。 here