止损图栏间距

Question

我正在使用flotchart JS来显示条形图。但是，我似乎无法固定钢筋之间的间距。

我已经启用了平移。但是，根据占位符设置条的宽度。如何根据其标签设置每个条的间距？

这是我的代码：

$.plot("#graph", [ data ], {
        series: {
          bars: {
            show: true,
            barWidth: 0.6,
            align: "center"
          }
        },
        xaxis: {
          mode: "categories",
          showTicks: false,
          gridLines: false,        
          panRange: [0,null],
        },
        yaxis: {
          panRange: [0, null],
          plotPan: false //pan axis is allowed for plot pan
        },
        pan: {
          interactive: true,
          mode: "smart",   
          active: true
        }
      });

Answer 1

您的问题的另一种解决方案是例如使用tickrotor plugin来旋转刻度线标签：

'rxjs/operators'

由于标签现在占用更多空间，因此您可能需要增加图表的高度。有关完整示例，请参见此fiddle。

Answer 2

您可以通过为max提供一个xaxis属性来限制一次显示的条形数量：

    xaxis: {
      mode: "categories",
      showTicks: false,
      gridLines: false,        
      panRange: [0,null],
      max: 7, // set according to your needs, maybe dynamic depending on chart width
      min: 0
    },

然后，您必须使用平移来查看其他栏。有关示例，请参见此fiddle。