时间戳

首页 > 解决方案 > Flot 多折线图，其中类别不显示标签

jquery - Flot 多折线图，其中类别不显示标签

问题描述

我正在尝试使用 flot js 呈现多线图。我想在图表端点显示带有标签的自定义文本的 x 轴。这是我的 js小提琴链接。 

  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

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

标签： jqueryflotlinechart

解决方案

问题是，标签插件试图["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"]]

请参阅此更新的小提琴以获取完整的工作示例。

推荐阅读