使用类别不显示标签的 Flot 多折线图

Question

我正在尝试使用 flot js 呈现多折线图。我想用图表端点中的标签显示带有自定义文本的 x 轴。这是我的 js fiddle link。

  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-labels、flot-categories

当我使用类别插件时，标签没有显示在折线图中。

Answer 1

问题是，标签插件试图从 plot.pointOffset() 函数中获取 ["2018-Jan", ...] 处的点的位置，但它只能在获取数值时计算位置。您可以通过不使用类别插件并自己实现类别模式来解决这个问题。为此，将数据更改为

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

并在选项中为 x 轴提供一个 ticks 数组：

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

查看此 updated fiddle 以获得完整的工作示例。

使用类别不显示标签的 Flot 多折线图

Flot multi line chart with categories not showing labels

jquery

linechart

flot