Google visualization 不同负色的折线图

在Jqplot或Google可视化中可以有这样的东西吗

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

代码：

---

您可以在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});

函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'X'）；
data.addColumn（'number'，'Y'）；
data.addColumn（'boolean'，'axis crossing point'）；
var y=0；
对于（变量x=0；x<100；x++）{
y+=~（Math.random（）*5）*Math.pow（-1，~~（Math.random（）*2））；
如果（y<-50）{
y+=5；
}
如果（y>50）{
y-=5；
}
data.addRow（[x，y，false]）；
}
//分析数据，查找数据与x轴相交的点（y=0）
//向后工作，因为我们将向数据集中添加新行
变量p1，p2，m，b，相交；
对于（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；
数据。插入行（i[
[相交，p1.y，真]，
[相交，p2.y，真]
]);
}
}
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0{
键入：“编号”，
标签：'阳性'，
计算：函数（dt，行）{
变量y=dt.getValue（第1行）；
返回数据.getValue（第2行）？0:（（y>=0）？y:null）；
}
}, {
键入：“编号”，
标签：'阴性'，
计算：函数（dt，行）{
变量y=dt.getValue（第1行）；
返回数据.getValue（第2行）？0:（（y<0）？y:null）；
}
}]);
var chart=new google.visualization.LineChart（document.querySelector（'#chart_div'））；
图表。绘制（视图{
身高：400，
宽度：600，
言辞：{
视图窗口：{
最低：-50，
最高：50
}
}
});
}
load（'visualization'，'1'，{packages:['corechart']，callback:drawChart}）；

---

请参阅工作示例：

我认为您无法直接使用Jqplot实现这一点。在做了很多改变后，你就可以做到这一点。答案很好，但是对于多行，你会怎么做呢？

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});