带有“字符串”x轴的浮点数答案

【问题标题】：Flot With "String" x-axis带有“字符串”x轴的浮点数
【发布时间】：2011-04-28 15:19:02
【问题描述】：

当使用 flot 时，我希望有一个基于字符串的 x 轴。例如，我有一个客户列表“Bob”、“Chris”、“Joe”，并且想在 Y 轴上绘制他们的收入。（这是条形图）

乍一看，flot 似乎只支持 x 轴上的数字类型。这是真的吗？

【问题讨论】：

标签： flot

【解决方案1】：

@Matt 很接近，但使用ticks 选项直接指定哪些刻度应具有哪些标签会更有意义：

var options = {

...
  xaxis: {
    ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']]
  }
...

};

编辑：看起来像this（我添加的数据比标签多，但你明白了）。

【讨论】：

还有一个“类别”插件：flotcharts.org/flot/examples/categories - 但我暂时无法在 x 轴上放置适当的标签：/
@Aheho - 谢谢，我将其更新为指向实际存在的 flot 来源:)
@OlivierLance 谢谢！链接

【解决方案2】：

类别插件 (jquery.flot.categories.js) 可以很好地做到这一点，因此数据可以像这样格式化：

var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];

并像这样绘制：

见：http://www.flotcharts.org/flot/examples/categories/index.html

【讨论】：

工作就像一个魅力！

【解决方案3】：

您应该能够按照this question 使用tickFormatter 选项来执行此操作。我自己没有尝试过，但试一试：

var xAxisLabels = ['Bob', 'Chris', 'Joe'];    
function xAxisLabelGenerator(x){
    return xAxisLabels[x];
}

var plot = $.plot($("#placeholder"), { 
    // snip other options...
    xaxis: {
       transform: xAxisLabelGenerator,
       tickFormatter: xAxisLabelGenerator 
    }
});

这意味着实际的 x 值应该是0, 1, 2, ...

【讨论】：

+1 - 这可能不是选择的答案（我也赞成），但这非常有用。
标签生成器上的 x 参数，它是从哪里来的？
@KasperSkov flot 将参数传递给您指定的回调。
真的吗？这对我来说毫无意义:)我认为你必须做一些类似的事情 transform:function (x) { return xAxisLabelGenerator(x); }
@KasperSkov transform:function (x) { return xAxisLabelGenerator(x); } 是一种不必要的冗长，虽然是等效的，但我的答案是：transform: xAxisLabelGenerator。