javascript - 定位浮动 xaxis 标签

Question

我正在使用在不规则位置具有刻度线的 flot 绘制绘图，例如，一个在位置 100，一个在位置 155，一个在位置 230。Flot 能够很容易地将刻度线放在这些位置。

但我想在这些点之间放置轴标签，例如

|--------------|-------|------------------|
    blahblah       huh        metoo

无法弄清楚如何做到这一点。有什么建议吗？

谢谢

Answer 1

这使用 flot 的多轴功能添加带有标签的第二个轴：

代码：

       $.plot($("#placeholder"),
       [ { data: [[1,1],[12,12],[45,45],[2,2],[7,7],[90,90],[112,112],[145,145],[87,87],[250,250]]},
         { data: [[]], xaxis: 2}], //second empty series
           {
               xaxes: [ {ticks:[100,155,230]}, // force tick location
                        {ticks: [50,127.5,192.5], // label locations, center them based on forced tick locations
                         min: 0, max: 250, // set min and max to scale 2nd axis
                         tickFormatter: // return string label instead of number
                           function formatter(val, axis) { 
                             if (val == 50) return "blahblah";
                             else if (val == 127.5) return "huh";
                             else if (val == 192.5) return "metoo";
                             else return "";
                          }} ]
           });​

在这里拉小提琴。