代码之家 › 专栏 › 技术社区 › prabu

类别不显示标签的浮动多折线图

linechart flot jquery

prabu · 技术社区 · 6 年前

我正在尝试使用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 labels、flot categories

当我使用类别插件时,标签不会显示在折线图中。

1 回复 | 直到 6 年前

Raidri 6 年前

问题是,标签插件试图获取点的位置 ["2018-Jan", ...] 来自 plot.pointOffset() 函数,但只有当它得到一个数字值时才能计算位置。您可以通过不使用Categories插件和自己实现Categories模式来解决这个问题。为此,将数据更改为

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"]]

看看这个 updated fiddle 作为一个完整的工作例子。

推荐文章

NorthSide · dc。js折线图-填写缺失的日期并在没有数据的情况下显示零

6 年前

user4129291 · 堆叠折线图不工作的单击事件

6 年前

Lechucico · 创建折线图并填充数据库信息

6 年前

G.Price · 使用Apache POI组合条形图和折线图

7 年前

yer · 重复x轴Morris上的值。js折线图

7 年前

Eshan · d3中未出现行。js折线图(仅轴可见)

7 年前

Sajal Roychowdhury · 在melt数据框中设置变量列

7 年前

user6195239 · 如何使用从csv文件过滤的数据创建多系列折线图?

7 年前

Durga · 使用折线图d3中的下拉菜单重新缩放x轴

7 年前

user46543 · 用python绘制多条线[重复]

7 年前