如何在Flot中通过JSON添加动态滴答声? [英] How to add Dynamics Ticks through JSON in Flot?

问题描述

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

I want to change the X-Axis values from default to Dynamic Ticks which is passed from JSON.

在我的上一篇文章中如何绘制时间值在Flot Graph 中，我发现可以通过

Through my last post How to plot time values in Flot Graph, I found out that it is possible through Categories.js

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

I added the JS and modified My JSON in the format below matching to the format given in the Example.

  [{"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轴未显示任何值，默认值也未显示.我的结果图看起来像这样.

When i run this code, x-axis is not displaying any values, the default values also not getting displayed. My result graph is look like this.

我已测试 code.google.com/p/flot/，但打勾/类别无效.我得到了这样的示例的输出.

I tested The sample example given in code.google.com/p/flot/ but the tickes/categories is not working. I get the Output for the example like this.

推荐答案

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

Flot is now hosted out of github: https://github.com/flot/flot

如果您抓到 jquery.flot.js 和<从那里a href ="https://github.com/flot/flot/blob/master/jquery.flot.categories.js" rel ="nofollow"> jquery.flot.categories.js 并运行您的代码，它将起作用. 不不起作用的是jquery.flot.js版本0.7结合了github上的最新类别插件.

If you grab jquery.flot.js and jquery.flot.categories.js from there and run your code, it will work. What does NOT work is jquery.flot.js version 0.7 combined with the latest categories plugin from github.

我使用以下代码运行它并正确显示:

I ran it with this code and it displayed correctly:

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/

这篇关于如何在Flot中通过JSON添加动态滴答声?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！