自定義Google折線圖

Question

我正在研究需要折線圖的項目，因此我選擇了Google折線圖，因為它易於獲取且使用快速，但是我在自定義Google折線圖中的某些功能時遇到問題，是否可以像這樣自定義Google圖表圖片？？ 我嘗試並使用輪換，但沒有得到我的結果！！！

這是Google折線圖示例代碼

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['X', 'Y'],
        [1, 100], // keep linked points adjacent
        [1, 200],
        [null, null], // insert blank row in between
        [2, 150],
        [2, 275],
        [null, null],
        [3, 75],
        [3, 200],
        [null, null],
        [4, 100],
        [4, 300]
    ]);
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        pointSize: 20,
        pointShape: 'triangle', rotation: 180
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

Answer 1

您可以通過將數據點分成單獨的系列並使用不同的點形狀選項進行繪制來實現：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['X', 'Y', 'Direction'],
        [1, 100, 'down'], // keep linked points adjacent
        [1, 200, 'up'],
        [null, null, null], // insert blank row in between
        [2, 150, 'down'],
        [2, 275, 'up'],
        [null, null, null],
        [3, 75, 'down'],
        [3, 200, 'up'],
        [null, null, null],
        [4, 100, 'down'],
        [4, 300, 'up']
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        // down triangles
        type: 'number',
        calc: function (dt, row) {
            return (dt.getValue(row, 2) == 'down') ? dt.getValue(row, 1) : null;
        }
    }, {
        // up triangles
        type: 'number',
        calc: function (dt, row) {
            return (dt.getValue(row, 2) == 'up') ? dt.getValue(row, 1) : null;
        }
    }]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        series: {
            0: {
                // this will draw the line
                pointSize: 0,
                color: '#3366cc' // set the color so they are all the same
            },
            1: {
                // this will draw the down triangles
                lineWidth: 0,
                pointSize: 20,
                pointShape: {
                    type: 'triangle',
                    rotation: 180
                },
                visibleInLegend: false,
                color: '#3366cc' // set the color so they are all the same
            },
            2: {
                // this will draw the up triangles
                lineWidth: 0,
                pointSize: 20,
                pointShape: {
                    type: 'triangle'
                },
                visibleInLegend: false,
                color: '#3366cc' // set the color so they are all the same
            }
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

http://jsfiddle.net/asgallant/6dhm8u3y/