自定义Google折线图

Question

I am working on project that need a line chart and I chose Google line chart because that is easy to get and fast to use but I have problem with customizing some feature in Google line chart is there a way to can customize Google chart like the this image?? I tried and use rotation but I didn't get the my outcome of that!!!

Here is the Google Line chart Sample Code

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

You can do this by splitting your data points into separate series and drawing them with different point shape options:

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/