jqplot 和堆积图数据标签答案

【问题标题】：jqplot and stacked chart data labelsjqplot 和堆积图数据标签
【发布时间】：2011-10-25 21:12:02
【问题描述】：

我在使用 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}
      }
    }

【问题讨论】：

没怎么用过jqplot。但是有两个指针：1.为什么你有一个负边缘公差？ 2.你可以试试jqplot渲染器的“dataLabelNudge”属性
嗨 Srini - 我在玩边缘公差，这就是为什么它是负面的。它并没有真正影响事情，因为数据标签靠近图表的边缘。
我认为“dataLabelNudge”属性仅适用于饼图和圆环图。

标签： jqplot

【解决方案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 的数据数组中传递自定义点值标记。如果您可以在旁边添加一些 html 来设置数据标记的样式，我不会感到震惊。

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

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

【讨论】：

【解决方案2】：

试试这个dataLabelPositionFactorproprety

【讨论】：