javascript - 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) 并返回对应于该位置的字符串中的字母。