Интервал Flot Chart Bar

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 :

    xaxis: {
      mode: "categories",
      showTicks: false,
      gridLines: false,        
      panRange: [0,null],
      rotateTicks: 90
    },

Возможно, вам потребуется увеличить высоту диаграммы, поскольку метки теперь занимают больше места. Смотрите скрипка для полного примера.

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 .