Question

我正按照Google Line Chart Documentation创建Google折线图。

我想设置线条的颜色，使其成为两种颜色之间的渐变，例如绿色和红色之间的渐变。每种颜色的加权应由“＆＃39; y”控制。线的价值。

即。在线的位置＆＃39; y＆＃39;值为0，该行将为完全绿色，最高为＆＃39; y＆＃39;它的价值应该是完全红色的。在这两个值之间应该有一个权重，取决于该点的y值。

这可能吗？如果是这样，怎么样？

Answer 1

由于Google Line Chart是基于SVG的，您可以通过linearGradient element自定义线条如何从一种颜色更改为另一种颜色。

以下示例显示如何将[linearGradient元素]注入图表（google.visualization.LineChart）：

＆＃13;

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');

    data.addRows([
      [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
      [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
      [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
      [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
      [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
      [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
      [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
      [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
      [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
      [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
      [60, 64], [61, 60], [62, 65], [63, 60], [64, 50], [65, 45],
      [66, 40], [67, 42], [68, 35], [69, 30]
    ]);

    var options = {
        hAxis: {
            title: 'Time'
        },
        vAxis: {
            title: 'Popularity'
        },
        backgroundColor: '#f1f8e9'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        addChartGradient(chart);
    });
    chart.draw(data, options);
}

function addChartGradient(chart) {
    var chartDiv = chart.getContainer();
    var svg = chartDiv.getElementsByTagName('svg')[0];
    var properties = {
        id: "chartGradient",
        x1: "0%",
        y1: "0%",
        x2: "0%",
        y2: "100%",
        stops: [
            { offset: '5%', 'stop-color': '#f60' },
            { offset: '95%', 'stop-color': '#ff6' }
        ]
    };
    

    createGradient(svg, properties);
    var chartPath = svg.getElementsByTagName('path')[1];  //0 path corresponds to legend path
    chartPath.setAttribute('stroke', 'url(#chartGradient)');
}


function createGradient(svg, properties) {
    var svgNS = svg.namespaceURI;
    var grad = document.createElementNS(svgNS, 'linearGradient');
    grad.setAttribute('id', properties.id);
    ["x1","y1","x2","y2"].forEach(function(name) {
        if (properties.hasOwnProperty(name)) {
            grad.setAttribute(name, properties[name]);
        }
    });
    for (var i = 0; i < properties.stops.length; i++) {
        var attrs = properties.stops[i];
        var stop = document.createElementNS(svgNS, 'stop');
        for (var attr in attrs) {
            if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
        }
        grad.appendChild(stop);
    }

    var defs = svg.querySelector('defs') ||
        svg.insertBefore(document.createElementNS(svgNS, 'defs'), svg.firstChild);
    return defs.appendChild(grad);
}

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

＆＃13;

JSFiddle

如何在Google Visualization折线图上创建颜色渐变

1 个答案: