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

【问题标题】：String based axis for jQuery Flot graphs?jQuery Flot 图的基于字符串的轴？
【发布时间】：2010-10-06 19:34:26
【问题描述】：

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

例如，我想在 Y 轴上（请原谅糟糕的图表）：

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

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

【问题讨论】：

标签： javascript jquery graph flot

【解决方案1】：

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

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

这样做的好处是您可以在运行时通过 AJAX 调用完全控制它（假设您使用 JSON 传递轴配置），而当前发布的解决方案需要硬编码函数。

【讨论】：

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

【讨论】：