2

jqplotでガントチャートのようなものを作成しようとしています。同じプロットに2つのタイムラインを作成したいと思います。コードとjsFiddelからわかるように、ほとんどの部分でこれが機能しています。

いくつかのシリーズを手動で追加しました(そしてシリーズ構成を追加しました)もちろん、これは後でループになります。

私が今抱えている問題は、Y軸上では数字ではなく、シリーズのテキストラベル(「連絡先」と「ロカティ」)が必要なことです。これが動的に行われると便利ですが、現時点で必要なのは2つだけなので、「ハードコーディング」しても問題ありません。

これを行う例が見つかりません。何か案は?これがjsFiddleです:http://jsfiddle.net/NVbjv/1/

    var seriesCnf = Array();
    var loc = Array();

    // add location values
    loc.push([[1340877534000, 1, 'lagehaghorst'] , [1340877569000, 1, 'lagehaghorst' ]]);
    seriesCnf.push({color: "#941B80", label: "Locatie"});
    loc.push([[1340877779000, 1, 'weegnet'] , [1340877869000, 1, 'weegnet' ]]);
    seriesCnf.push({color: "#941B80"});
    loc.push([[1340877989000, 1, 'lagehaghorst'] , [1340878139000, 1, 'lagehaghorst' ]]);
    seriesCnf.push({color: "#941B80"});

    // add ignition values
    loc.push([[1340877534000, 2, 'uit'], [1340877561000, 2, null]]);
    seriesCnf.push({color: "#FF0000", showMarker:false, label: "Contact"});
    loc.push([[1340877561000, 2, 'aan'], [1340877779000, 2, null]]);
    seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
    loc.push([[1340877779000, 2, 'uit'], [1340877839000, 2, null]]);
    seriesCnf.push({color: "#FF0000", showMarker:false});
    loc.push([[1340877839000, 2, 'aan'], [1340878019000, 2, null]]);
    seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
    loc.push([[1340878019000, 2, 'uit'], [1340878139000, 2, null]]);
    seriesCnf.push({color: "#FF0000", showMarker:false});

    plot1 = $.jqplot('container', loc,{
        seriesColors: ["#941B80"],
        title: "Tijdlijn",
        axes: {
          xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    formatString: '%R',
                    angle: 0
                },
          },
          yaxis: {
            min: 0,
            tickInterval: 1,
          }
        },
        seriesDefaults: {
            showMarker:true,
            pointLabels:{
                show:true,
                location:'s',
                labelsFromSeries: true,
                formatter: $.jqplot.DefaultTickFormatter,
            }
        },
        series: seriesCnf,

        grid: {
            background: '#ffffff'
        }
    });
4

0 に答える 0