较低值的 Jqplot 堆积条形图重叠点标签答案

【问题标题】：Jqplot Stacked Barchart Overlapping Points Label for Lower Values较低值的 Jqplot 堆积条形图重叠点标签
【发布时间】：2014-06-18 00:58:48
【问题描述】：

我正在使用 Jqplot 堆积条形图。它工作正常，但问题在于点标签重叠的黄色和蓝色条的小值。

有人可以帮我解决这个问题，以显示我的两个点标签，两个值不重叠吗？

用于重绘统计条形图的 Jqplot 选项

ticks =['Jan 14', 'Feb 14', 'Mar 14', 'Apr 14', 'May 14', 'Jun 14', 'Jul 14', 'Aug 14', "Sep 14", 'Oct 14', 'Nov 14', 'Dec 14'];
  var s1 = [73, 112, 307, 849, 1591, 1016, 647, 445, 60, 30, 10, 1];
  var s2 = [4338, 5114, 3484, 2282, 89, 35, 8, 3, 2, 1, 1, 0];
  plot3 = $.jqplot('chart3', [s1, s2], {
    // Tell the plot to stack the bars.
    seriesColors: [ "rgb(255, 78, 80) ", "rgb(29, 171, 54)"],
    animate: !$.jqplot.use_excanvas,
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          // Put a 30 pixel margin between bars.
          barMargin: 30,
          highlightMouseDown: true   
      },
      pointLabels:{ show:true, stackedValue: false }
    },
    series:[
            {label:'Inflight'},
            {label:'Completed'}
        ],
    axes: {
      xaxis: {
          ticks: ticks,
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        padMin: 0
      }
    },
    legend: {
      show: true,
      location: 'n'/*,
      placement: 'outside'*/
    }      
  });

【问题讨论】：

你能显示用于绘制图表的选项吗？
我附上了用于绘制图表的绘图选项。
将文字旋转-45度，见下面我的回答。

标签： javascript jquery jqplot bar-chart

【解决方案1】：

您可以使用 ypadding 选项 (documentation here) 来指定点和标签之间的填充。请看一个例子here 我已经为你的系列指定了一个填充值：

series:[
 {label:'Inflight', pointLabels: {ypadding: 2}},
 {label:'Completed', pointLabels: {ypadding: 15}}
]

我认为您需要对其进行修改，以使这些填充依赖于系列值。

【讨论】：

【解决方案2】：

解决此问题的最佳方法是使用 CSS 将文本旋转 -45 度.. 非常简单..

.jqplot-point-label {
    transform: rotate(-45deg);
}

当然，您应该知道您可能会影响其他哪些图表或报告。

PS: 对于跨浏览器，使用下面的类取自并修改自 How can I draw vertical text with CSS cross-browser?

.rotate {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

【讨论】：