2

フロート グラフのデータ シリーズの 1 つに別のシンボルを使用しようとしています。これは、残りのデータよりもはるかに大きなスケールであるためです。この例を参照として使用しています: http://www.flotcharts.org/flot/examples/symbols/index.html

これが私がこれまでに持っているものです：

私の含まれるもの：

<script  type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>

次に、flot オプションを次のように構成します。

var options = {
        grid: {hoverable : true},
        xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
        series: { points : { show: true } }
        };

次に、実際にデータをプロットします。

 $.plot('#placeholder', [{
               data: my_data,
               lines: { show : true},
               points: { symbol: "square"},
               color: '#CB4B4B',
               label: 'My Data'
               }], options);
        }

ただし、flotポイントをデフォルトの円としてグラフ化しています。firebug でエラー メッセージが表示されず、jquery.flot.symbol.jsライブラリ自体にログ メッセージを追加して、「square」ハンドラが次のように呼び出されているかどうかを確認しました。

var handlers = {
            square: function (ctx, x, y, radius, shadow) {
                console.log("Square handler was called");
                // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
                var size = radius * Math.sqrt(Math.PI) / 2;
                ctx.rect(x - size, y - size, size + size, size + size);
            },

コンソール メッセージが表示されないため、ハンドラーが正しく呼び出されていないと想定しています。ここで何か不足していますか？

編集：

プロットしようとしているデータの例:

var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];

optionsパラメータとプロット関数の呼び出し方法も編集しました。

var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
}; 

 $.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);

symbolまた、ライブラリにログ自体を追加したため、ライブラリが含まれていることも確信しています。これは問題なく表示されます。

4

1 に答える 1

4

あなたがしたことに何の問題もないと思います。ここで簡単な実例を作成しました： http://jsfiddle.net/ryleyb/shLtU/1/

シンボルライブラリを含めていないと思います（持っていると言っていても）。

または、データを表示してください。何らかの問題がある可能性があります（疑わしいですか？）。

これは、flot実際の例を作成するために実行した完全なコードです (さらに、flot とシンボル ライブラリを含みます)。

$.plot('#placeholder', [{
    data: [
        [1, 1],
        [2, 3],
        [4, 4],
        [5, 9]
    ],
    lines: {
        show: true
    },
    points: {
        show: true,
        symbol: "square"
    },
    color: '#CB4B4B',
    label: 'My Data'
}]);
于 2013-03-27T15:58:39.413 に答える