Question

Jqplot Stacked bar chart points label collapsing for lower values

我正在使用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'*/
    }      
  });

Answer 1

您可以使用 ypadding 选项（documentation here）来指定点和标签之间的填充。请参阅示例here，其中我已为您的系列指定了填充值：

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

我认为你需要修改它才能使这些系列的填充依赖者能够进行修改。值。

Answer 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);
}

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

2 个答案: