Flot многолинейный график с категориями, не показывая метки

Question

Я пытаюсь визуализировать многострочные графики, используя flot js. Я хотел бы показать ось X с настроенным текстом с меткой в ​​конечных точках диаграммы. Вот моя ссылка JS Fiddle.

  var labelArray1 = ["0.35%", "0.34%", "0.45%", "0.77%", "1.07%"];
  var d1 = [["2018-Jan", 0.35], ["2018-Feb", 0.34], ["2018-Mar", 0.45], ["2018-Apr", 0.77],["2018-May", 1.07]];

  var labelArray2 =["0.53 kegs", "0.62 kegs", "0.85 kegs", "1.04 kegs", "1.06 kegs"];
  var d2 = [["2018-Jan", 0.53], ["2018-Feb", 0.62], ["2018-Mar", 0.85], ["2018-Apr", 1.04],["2018-May", 1.06]];

  var data = [ { data: d1, cColor: "orange", canvasRender: true, dashes: {show: true}, showLabels: true,points: {show: true}, label: "section1", labelPlacement: "above", labels: labelArray1  }, { data: d2, lines: {show: true}, points: {show: true}, cColor: "AD8200", canvasRender: true, label: "section2", labelPlacement: "above", labels: labelArray2,  showLabels: true }];
  var options = {legend:{position:"nw"}, grid: { hoverable: true },xaxis: { autoscaleMargin: 0.04, fillStyle: "#000", mode: "categories", rotateTicks: "90",  font: { color: "#000" } }, yaxis: {ticks:[]}};     

  $(document).ready(function(){
    chart = $.plot($("#placeholder"),data,options);
  });

Я использую следующие плагины: flot-dashes, flot-label, flot-Categories

Когда я использую плагин категорий, метка не отображается на графике линий.

Answer 1

Проблема в том, что плагин меток пытается получить положение точек на ["2018-Jan", ...] от plot.pointOffset() функция, но это может только вычислить позицию, если она получает числовое значение. Вы можете решить эту проблему, не используя плагин категорий и самостоятельно внедряя режим категорий. Для этого измените данные на

var d1 = [
    [0, 0.35],
    [1, 0.34],
    [2, 0.45],
    [3, 0.77],
    [4, 1.07]
];

и дать ticks массив для xaxis в опциях:

ticks: [[0, "2018-Jan"], [1, "2018-Feb"], [2, "2018-Mar"], [3, "2018-Apr"], [4, "2018-May"]]

Посмотрите эту обновленную скрипку для полного рабочего примера.