javascript - Flotとのマルチバーチャット

Question

flotを使用した複数のバーを持つチャートのサンプルコード??

この例に似ています。指定されたパッチファイルが機能していません。どこでもマルチ棒グラフの最新ファイルをダウンロードできます。

アップデート

Flotは非常に優れたライブラリであると確信していますが、プラグイン/アドオンは簡単に入手できず、Webサイトに記載されている例は非常に基本的なものであるため、代わりにjqPlotを使用することにしました。

Answer 1

更新情報: Andión の回答は、このライブラリを参照しています。バーを並べて表示

コードはhttp://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.jsからダウンロードできます 。

結果は次のとおりです。

Answer 2

orderBarsプラグイン を試しましたか?

コードはこちらからダウンロードできます

Answer 3

各バーを独自のデータ シリーズとして扱う必要があるため、11 本のバーが表示される場合は、11 個のデータ シリーズを作成する必要があります。

2 つのバーのサンプル コードを次に示します。

<script id="source" language="javascript" type="text/javascript">
$(function () {

var d1 =[0, 2];
var d2 =[1,3];

var startData = [
    {   //first series
        label:"d1",
        data: [d1],
        bars:{
            show: true,
            fill: true,
            fillColor: "red"
        }
    },
    {   //second series
        label:"d2",
        data: [d2],
        bars:{
            show: true,
            fill: true,
            fillColor: "blue"
        }
    }
];

var option={
        series: {
                bars:{
                        show: true,
                        fill: true
                }
        },
        grid: {
                hoverable: true,
                clickable: true
        },
        yaxis: { ticks: 5 }
    };

$.plot($("#placeholder"),startData,option  );

});

Answer 4

(バー シリーズの) X 軸で渡される値を再確認します。

バーごとに異なるシリーズは必要ありません。それは....過剰です。

必要なのは、バーの色ごとに異なるシリーズ(または、より正確には、チャートに含めるレンダリング設定の異なるセットごと) です。

先に進んだことは承知していますが、問題を引き起こしているコードを投稿したい場合は、他の人を助けるかもしれません. flot サイトの例は非常に単純なので、つまずいたのは単純なもの (定義されていない場合の X 軸の値など) だった可能性があります。

私はプロダクション システムで flot を使用して 3 つの異なるバー シリーズ (赤、黄、緑のバー) をレンダリングしているので、あなたがやろうとしているのと非常によく似たソリューションのように聞こえます。