如何在flot图表中加粗多个y轴线？

Question

我正在使用flot chart。我有多个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 };
}

Answer 1

上面代码中的技术使用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();
}); 

在上面的代码上执行时，会产生：

工作示例here。

Answer 2

请参阅此帖关于create bold axes in flot

如果您需要更多帮助，请告诉我