具有不同负色的折线图

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/