Графики Google — нанесение линий тренда на столбчатую диаграмму

Я пытаюсь построить линию тренда на столбчатой ​​диаграмме. Но строки не отображаются. Пожалуйста, обратитесь к jsfiddle https://jsfiddle.net/sashant9/m04py64w/

Я использовал «линии тренда: {1:{},2:{}}» в соответствии с документацией Google Charts.

Пожалуйста, проверьте код ниже.

    function drawVisitorGraph() {


        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Search Visitors');
        data.addColumn('number', 'Unique Visitors');

        data.addRow(["2015-07-01",1774,3266]);
        data.addRow(["2015-07-02",1891,3017]);
        data.addRow(["2015-07-03",1572,2730]);
        data.addRow(["2015-07-04",979,1604]);
        data.addRow(["2015-07-05",1024,1702]);
        data.addRow(["2015-07-06",2163,4097]);

        var chart = new google.visualization.ColumnChart(document.querySelector('#visitor_graph'));

        var options = {
                bars: 'vertical',
                vAxis: {format: 'decimal'},
                trendlines: { 1:{},2:{}}, 
                width: '100%',
                height: '100%',
                colors: ['#070979', '#EC0F13']
            }
            chart.draw(data,options);

    }

    //google.setOnLoadCallback(drawChart);

    google.load('visualization', '1.1', {packages: ['corechart'], callback: drawVisitorGraph});

javascript google-visualization jsapi
person Sashant Pardeshi    schedule 30.07.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Пожалуйста, попробуйте приведенный ниже код. Проверьте рабочую скрипту здесь.

function drawVisitorGraph() {


    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Search Visitors');
    data.addColumn('number', 'Unique Visitors');

    data.addRow([new Date(2015,07,01),1774,3266]);
    data.addRow([new Date(2015,07,02),1891,3017]);
    data.addRow([new Date(2015,07,03),1572,2730]);
    data.addRow([new Date(2015,07,04),979,1604]);
    data.addRow([new Date(2015,07,05),1024,1702]);
    data.addRow([new Date(2015,07,06),2163,4097]);

    var chart = new google.visualization.ColumnChart(document.querySelector('#visitor_graph'));

    var options = {
            bars: 'vertical',
            vAxis: {format: 'decimal'},
            trendlines: { 0:{},1:{}}, 
            width: '100%',
            height: '100%',
            colors: ['#070979', '#EC0F13']
        }
        chart.draw(data,options);

}

//google.setOnLoadCallback(drawChart);

google.load('visualization', '1.1', {packages: ['corechart'], callback: drawVisitorGraph});
person Purvesh Desai    schedule 30.07.2015
comment
Спасибо за ответ, нам нужна любопытная строка, похожая на эту jsfiddle.net/sashant9/m04py64w/1, но ось X должна быть типа даты, не могли бы вы помочь. - person Sashant Pardeshi; 30.07.2015
comment
Чтобы сгенерировать полиномиальную линию тренда, укажите полиномиальный тип и степень. Используйте с осторожностью, так как иногда они могут привести к ошибочным результатам. Здесь, например, я использую кубическую (степень 3) линию тренда. trendlines: { 0:{type: 'polynomial', degree: 3}, 1:{type: 'polynomial', degree: 3}} - person Purvesh Desai; 30.07.2015