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

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

0 голосов
/ 24 мая 2018

Я пытаюсь визуализировать многострочные графики, используя 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

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

1 Ответ

0 голосов
/ 25 мая 2018

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

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

и дайте массив ticks для оси x в опциях: 

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

См. обновленную скрипку дляполный рабочий пример.

...