google-visualization - 具有不同负颜色的折线图

Question

是否可以使用 Jqplot 或 Google Visualizations 实现类似的功能



到目前为止，我能够用 jqplot 创建类似但不完全是我想要的东西



代码:

var style = {
seriesDefaults: {
    fill: true,
    fillToZero: true,
    fillAndStroke: true,
    color: "rgba(190,230,110, 0.8)",
    fillColor: "rgba(206,236,145, 0.8)",
    shadow: false,
    lineWidth: 1,
    rendererOptions: {
        highlightMouseOver: false
    }
},
seriesColors: ["#009900", "#000099", "#00cc00", "#0000cc"],
negativeSeriesColors: ["#bb0000", "#ffe700", "#dd0000"]   };

Answer 1

您可以在 Google Visualization API 中执行类似操作，但您必须计算该线的 0 线交点并将它们添加为数据点，然后将您的数据分成两个不同的系列(一个正数和一个负数)。这些轴交叉点将成为您数据的一部分(当您将鼠标悬停在它们上面时它们会产生工具提示)，但它满足您的要求:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn('boolean', 'axis-crossing point');

    var y = 0;
    for (var x = 0; x < 100; x++) {
        y += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        if (y < -50) {
            y += 5;
        }
        if (y > 50) {
            y -= 5;
        }
        data.addRow([x, y, false]);
    }

    // parse the data looking for points where the data crosses the x-axis (at y = 0)
    // work backwards because we will be adding new rows to the data set
    var p1, p2, m, b, intersect;
    for (var i = data.getNumberOfRows() - 1; i > 0; i--) {
        p1 = {x: data.getValue(i - 1, 0), y: data.getValue(i - 1, 1)};
        p2 = {x: data.getValue(i, 0), y: data.getValue(i, 1)};

        if ((p1.y >= 0 && p2.y < 0) || (p1.y < 0 && p2.y >= 0)) {
            m = (p2.y - p1.y) / (p2.x - p1.x);
            b = p1.y - m * p1.x;
            intersect = -1 * b / m;
            data.insertRows(i, [
                [intersect, p1.y, true],
                [intersect, p2.y, true]
            ]);
        }
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'Positive',
        calc: function (dt, row) {
            var y = dt.getValue(row, 1);
            return data.getValue(row, 2) ? 0 : ((y >= 0) ? y : null);
        }
    }, {
        type: 'number',
        label: 'Negative',
        calc: function (dt, row) {
            var y = dt.getValue(row, 1);
            return data.getValue(row, 2) ? 0 : ((y < 0) ? y : null);
        }
    }]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        vAxis: {
            viewWindow: {
                min: -50,
                max: 50
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

参见工作示例: http://jsfiddle.net/asgallant/Qc869/