Question

我遇到了jqplot的问题，并将数据标签放在堆积的图表上。

我正在为每列绘制三个数据值。问题是当其中一个数据值非常小（如1％）时，数据标签与相邻数据值的数据标签重叠。

我在这里上传了一张图片： http://img84.imageshack.us/img84/1305/capturell.jpg

我想要做的是能够将数据标签放在每个栏的中间。这可能吗？

以下是我正在使用的代码：

 plot1 = $.jqplot(id, data, {
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
         fillToZero: true,
          highlightMouseOver: false,
        highlightMouseDown: false,
        highlightColor: null,
        barDirection: 'horizontal'
      },
         pointLabels: { show: true, location: 'e', edgeTolerance: -15 }
    },
    title:{text: title,fontSize: 16},

    series:[
      {label: data_labels[0] },
      {label: data_labels[1]}

    ],
    seriesColors: [  "#4879a6", "#d9321d"], 

                // Rotate the bar shadow as if bar is lit from top right.
    shadowAngle: 135,

    axes: {
      xaxis: {
        min: 0,
        max: 100,
        tickInterval: 20,
        tickOptions: {formatString: '%d\%' ,fontSize: 14}
      },
      yaxis: {
         renderer: $.jqplot.CategoryAxisRenderer,
         ticks: ticks,
         tickOptions: {fontSize: 14}
      }
    }

Answer 1

请记住，seriesDefaults只是将相同的值传递给尚未定义的系列的每个实例。所以...

 seriesDefaults:{pointLabels: {show: true, stackedValue: false, location:'s'}},

与

相同

 series:[
             {pointLabels: {show: true, stackedValue: false, location:'s'}},           
             {pointLabels: {show: true, stackedValue: false, location:'s'}},
             {pointLabels: {show: true, stackedValue: false, location:'s'}}            
             ]

在jqplots网站上他展示了这个例子。 http://www.jqplot.com/deploy/dist/examples/point-labels.html

显示一个名为y-padding的值传递给pointLabels，这应该可以解决问题。该示例显示了如何在传递给jqplot的数据数组中传递自定义点值标记。如果你可以将它放在一边用来设置数据标记的样式，那就不会让我感到震惊。

 var data = [[x,y,tooltipValue],[x,y,null]];

希望这会有所帮助，或者至少让你指向正确的方向。

Answer 2

试试这个dataLabelPositionFactor proprety

jqplot和堆积图表数据标签

2 个答案: