0

私はフロットチャートを扱っています。複数のy軸があります。すべてのy軸を太字にする方法は？

$(function () {
    function generate(start, end, fn) {
    var res = [];
    for (var i = 0; i <= 100; ++i) {
        var x = start + i / 100 * (end - start);
        res.push([x, fn(x)]);
    }
    return res;
}

var data = [
    { data: generate(0, 10, function (x) { return Math.sqrt(x)}), xaxis: 1, yaxis:1 },
    { data: generate(0, 10, function (x) { return Math.sin(x)}), xaxis: 1, yaxis:2 },
    { data: generate(0, 10, function (x) { return Math.cos(x)}), xaxis: 1, yaxis:3 },
    { data: generate(0, 10, function (x) { return Math.tan(x)}), xaxis: 1, yaxis: 4 }
];
var plot = $.plot($("#placeholder"),
                  data,
                  {
                      xaxis: [
                          { position: 'bottom' },
                      ],
                      yaxes: [
                          { position: 'left', labelWidth : 18},
                          { position: 'right', tickColor:'black', labelWidth : 18, tickDecimals: 0},
                          { position: 'right' , tickColor:'black', labelWidth : 18, tickDecimals: 0},
                          { position: 'right', tickColor:'black', labelWidth : 18}
                      ],

                grid: {
                    clickable: true,
                    borderWidth: 0,
                    hoverable: true,
                    aboveData: true,
                    markings: [ { yaxis: { from: 0, to: 0 }, color: "#000" },
                        { xaxis: { from: 0, to: 0 }, color: 'black' }, { xaxis: { from: 0, to: -1 }, color: "green" }]
                },
                zoom: {
                    interactive: true
                 },
                  });


function getBoundingBoxForAxis(plot, axis) {
    var left = axis.box.left, top = axis.box.top,
        right = left + axis.box.width, bottom = top + axis.box.height;

    // some ticks may stick out, enlarge the box to encompass all ticks
    var cls = axis.direction + axis.n + 'Axis';
    plot.getPlaceholder().find('.' + cls + ' .tickLabel').each(function () {
        var pos = $(this).position();
        left = Math.min(pos.left, left);
        top = Math.min(pos.top, top);
        right = Math.max(Math.round(pos.left) + $(this).outerWidth(), right);
        bottom = Math.max(Math.round(pos.top) + $(this).outerHeight(), bottom);
    });
    return { left: left, top: top, width: right - left, height: bottom - top };
}
4

2 に答える 2

2

上記のコードの手法では、flot の「マーキング」API を使用して、軸に線を重ねます。追加の軸がプロットから外れているため、これは複数の y 軸では機能しないようです。ただし、プロットのキャンバスに直接「太字」の線を描くだけで機能します。たとえば、緑色の y 軸線を追加するには:

ctx = plot.getCanvas().getContext('2d'); //assuming your plot is stored in a variable named plot variable
ctx.strokeStyle = "green";
ctx.lineWidth = 7;
$.each(plot.getYAxes(), function(){    
    var axesDim = this.box;
    ctx.beginPath();
    xPos = axesDim.left;
    if (this.position == 'left')
    {
        xPos += axesDim.width;
    }
    ctx.moveTo(xPos,axesDim.top);
    ctx.lineTo(xPos,axesDim.top+axesDim.height);
    ctx.closePath();
    ctx.stroke();
});

上記のコードで実行すると、次のようになります。

ここに画像の説明を入力

ここでの作業例。

于 2012-10-16T22:40:08.967 に答える
0

flotで太字の軸を作成する方法については、この投稿を参照してください

さらにサポートが必要な場合はお知らせください

于 2012-10-15T13:50:31.873 に答える