使用"字符串"作为x轴的Flot图表

Question

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

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

- Chris Muench

Answer 1

@Matt 的回答接近了问题的解决方法，但更好的做法是使用ticks选项直接指定每个刻度所对应的标签：

var options = {

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

};

编辑：看起来像是这样（我添加了更多的数据而不是标签，但你可以得到想法）。

- Ryley

---

还有一个“分类”插件：http://www.flotcharts.org/flot/examples/categories/ - 但目前我无法在x轴上正确显示标签 :/ - Olivier Lance

@Aheho - 谢谢，我已经更新了指向实际存在的flot源。 - Ryley

@OlivierLance 谢谢您提供的链接！ - Ganesh RJ

Answer 2

根据这个问题，您应该能够使用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、...

- Matt Ball

---

+1 - 这可能不是被选中的答案（我也点赞了），但这非常有用。 - Mark Brittingham

你的标签生成器中的x参数是从哪里来的？ - Kasper Skov

@KasperSkov flot将参数传递给您指定的回调函数。 - Matt Ball

真的吗？这对我来说毫无意义 :) 我认为你需要做类似于以下的操作：transform:function (x) { return xAxisLabelGenerator(x); } - Kasper Skov

@KasperSkov transform:function (x) { return xAxisLabelGenerator(x); } 是一种冗长但等效的写法，而我的答案中则是 transform: xAxisLabelGenerator。 - Matt Ball

Answer 3

分类插件（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

- ak112358

---

运行得非常顺利！ - Roman C