javascript - 如何通过Flot中的JSON添加Dynamics Ticks？

我想将X轴值从默认值更改为从JSON传递的动态刻度。

在上一篇文章How to plot time values in Flot Graph中，我发现可以通过Categories.js

我添加了JS并以下面的格式修改了My JSON，使其与示例中给出的格式匹配。

  [{"data":[["Over Time",5202]],"label":"Over Time"},{"data":[["Shift Start",19620]],"label":"Shift Start"},{"data":[["Maintenance break",82920]],"label":"Maintenance break"},{"data":[["Lunch break",240]],"label":"Lunch break"},{"data":[["BreakDown",75720]],"label":"BreakDown"},{"data":[["Break",3060]],"label":"Break"},{"data":[["Tea break",72840]],"label":"Tea break"}]

和我的JS代码为

  <script language="javascript" type="text/javascript">
$(document).ready(function(){
$.getJSON('ReasonByTime.txt', function(json) {
    $.plot($("#placeholder"),json, {bars: { show: true, barWidth:0.2}, xaxis: { mode: "categories" }});
});

}）;
  

当我运行此代码时，x轴未显示任何值，默认值也未显示。我的结果图如下所示。



我测试了code.google.com/p/flot/中给出的示例示例，但刻度/类别不起作用。我得到这样的示例的输出。

最佳答案

Flot现在托管在github之外：https://github.com/flot/flot

如果您从此处获取jquery.flot.js和jquery.flot.categories.js并运行您的代码，则它将起作用。无效的是jquery.flot.js版本0.7与github上的最新类别插件结合使用。

我使用以下代码运行它，并正确显示了它：

var data = [{
    "data": [["Over Time", 5202]]},
{
    "data": [["Shift Start", 19620]]},
{
    "data": [["Maintenance break", 82920]]},
{
    "data": [["Lunch break", 240]]},
{
    "data": [["BreakDown", 75720]]},
{
    "data": [["Break", 3060]]},
{
    "data": [["Tea break", 72840]]}];


$.plot($("#placeholder"), data, {
    bars: {
        show: true,
        barWidth: 0.2
    },
    xaxis: {
        mode: "categories"
    }
});​

这是它的工作版本：http://jsfiddle.net/ryleyb/CQ3YS/

关于javascript - 如何通过Flot中的JSON添加Dynamics Ticks？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13506586/