jQuery Flot图的基于字符串的轴？

Question

如何在Flot图轴上获得非数字值？

例如，我希望在Y轴上（原谅这个糟糕的图表）：

/*
    A|
    B|          _/*----------*
    C|        _/              \
    D|      _/                 \
    E|    _/                    \
    F|   /                       \
    G|  *                         *
      --------------------------------
       100        200       300   400

我提供的数据如下所示： var data = [[100，'G']，[200，'B']，[300，'B']，[400，'G']];

Answer 1

您还可以将文本与刻度值相关联，如下所示：

ticks: [[0, "G"], [1, "F"], [2, "E"], [3, "D"]], // so on

以这种方式执行此操作的好处是您可以在运行时从AJAX调用完全控制它（假设您使用JSON传递轴配置），而当前发布的解决方案需要硬编码功能。

Answer 2

您可以将函数提供给tickFormatter以标记轴。假设G = 0和A = 6：

var data = [[100, 0], [200, 5], [300, 5], [400, 0]];

$.plot($("#placeholder"), [data], {
    yaxis: { tickFormatter: function (v, axis) {
        return "GFEDCBA".charAt(v);
      }
    }
});

charAt函数只取y轴值（0,5,5,0）并返回与该位置对应的字符串中的字母。