Question

目前，每个team都会分配一个值，例如team1.txt == 1 因此，当我渲染图表时，每个团队沿着x轴（时间轴）都有一条连续的线 y轴的值为1 .. 3，如何更改y轴'标签？
因此，我没有看到1作为y轴上的第一个指标，而是看到了team1.txt ..然后y轴上的下一个值将是team2.txt

HTML

<div id="content">
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder">
    </div>
</div>
<div id="chartLegend"></div>
</div>

的javascript

text = '[{"name":"team1.txt","points":[[1389340501000,1],[1389370501000,1],[1389873602000,1],[1390046402000,1],[1390078402000,1]]},{"name":"team2.txt","points":[[1389370501000,2],[1389441601000,2],[1389528002000,2]]},{"name":"team3.txt","points":[[1389370501000,3],[1389441601000,3],[1389441601000,3]]}]';
var datasets = JSON.parse(text);

var data = [];
for (var i = 0; i < datasets.length; i++) {
    data.push({label: datasets[i].name, data: datasets[i].points});
}


$.plot($("#placeholder"), data, {
    xaxis: {
        mode: "time",
        min: (new Date(2014, 1, 1)).getTime(),
        max: (new Date()).getTime()
    },
    series: {
        stack: true,
        lines: {
            show: true
        },
        points: {
            show: true
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    },
    legend: {
        noColumns: 5,
        container: $("#chartLegend")
    }
});

Answer 1

您可以使用tickFormatter函数：

yaxis: {
    tickFormatter: function (val, axis) {
        if (datasets[val - 1])
            return datasets[val - 1].name;
        else
            return '';
    }
},

有关正常工作的演示，请参阅此fiddle。

PS：我必须将xaxis min值更改为new Date(2014, 0, 1)（1月是0月，请参阅here）。

Answer 2

使用：

yaxis:{mode: "categories", tickLength:0}

这对我有用，我自动添加所有不同的字符串值（当它们作为y点发送时）。这是一个小提琴http://jsfiddle.net/Margo/yKG7X/4/

remmenber添加此脚本：http://www.flotcharts.org/flot/jquery.flot.categories.js

您还可以使用以下内容：

yaxis: { ticks: [[0, 'true'], [1, 'false']] }

..如果您的值是预定义的。

希望有所帮助：）

在flot图的y轴上使用标签而不是数字

2 个答案: