如何通过JSON在海军报添加动态蜱?(How to add Dynamics Ticks throu

2019-10-17 10:11发布

我想从默认是从JSON通过动态蜱改变X轴值。

通过我的最后一篇如何在海军报图绘制时间值 ,我发现有可能通过Categories.js

我添加了JS,并且在下面的匹配的格式,以在实施例中给出的格式经修改的我的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/但tickes /类别是行不通的。 我得到了这样的例子输出。

Answer 1:

海军报现在托管了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/



文章来源: How to add Dynamics Ticks through JSON in Flot?