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

Posted 2023-05-07

【中文标题】较低值的 Jqplot 堆积条形图重叠点标签

【英文标题】：Jqplot Stacked Barchart Overlapping Points Label for Lower Values

【发布时间】：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度，见下面我的回答。

【参考方案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);