2

我正在尝试在 jqplot 中制作类似甘特图的图表。我想在同一个情节中制作两条时间线。正如您从代码和 jsFiddel 中看到的那样，我大部分时间都在工作。

我已经手动添加了几个系列（并添加了一个系列配置）当然这将在稍后循环。

我现在遇到的问题是在 Y 轴上我不想要数字，而是系列的文本标签（“联系人”和“Locatie”）。如果这是动态完成的，那就太好了，但是“硬编码”它们不是问题，因为我现在只需要两个。

我找不到这样做的例子。有任何想法吗？这是 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