1

X軸の値をデフォルトからJSONから渡される動的ティックに変更したいと思います。

前回の投稿「FlotGraphで時間値をプロットする方法」を通じて、 Categories.jsで可能であることがわかりました。

JSを追加し、例に示されている形式に一致する以下の形式でMyJSONを変更しました。

  [{"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/にあるサンプル例をテストしましたが、ティック/カテゴリが機能していません。このような例の出力を取得します。

ここに画像の説明を入力してください

4

1 に答える 1

2

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/

于 2012-11-22T17:59:20.027 に答える