Графики Google Line.Удалите лишние линии сетки или измените их цвет - PullRequest
Новая
       7

Графики Google Line.Удалите лишние линии сетки или измените их цвет

0 голосов
/ 21 ноября 2018

Я создал линейный график Google со следующими настройками: 

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var options = {
        backgroundColor:{fill:'transparent'},
        legend:'none',
        series:{0:{color:'#aa8e57'}},
        lineWidth:4,
        pointSize:7,
        chartArea:{width: '86%'},    
        hAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72' 
        },
        vAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72'
        },
    };

    var dataMembers = new google.visualization.DataTable();
    dataMembers.addColumn('string', 'Date');
    dataMembers.addColumn('number', 'Users');
    dataMembers.addRows([
        ['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
    ]);    
    var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
    membersChart.draw(dataMembers, options);
}

Я прочитал все документы и не могу узнать, как настроить эти белые дополнительные линии: enter image description here

Я провел много экспериментов, но я не могу выяснить, как они появляются и как удалить их с графика.Или, по крайней мере, измените их цвет в соответствии с остальными линиями сетки.

1 Ответ

0 голосов
/ 21 ноября 2018

это -> minorGridlines

для того же цвета ... 

minorGridlines:{color:'#2a261d'},

для удаления ... 

minorGridlines:{count:0},

см. Следующую работуфрагмент ... 

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var options = {
        backgroundColor:{fill:'transparent'},
        legend:'none',
        series:{0:{color:'#aa8e57'}},
        lineWidth:4,
        pointSize:7,
        chartArea:{width: '86%'},    
        hAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            minorGridlines:{color:'#2a261d'},
            baselineColor:'#b19c72' 
        },
        vAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            minorGridlines:{color:'#2a261d'},
            baselineColor:'#b19c72'
        },
    };

    var dataMembers = new google.visualization.DataTable();
    dataMembers.addColumn('string', 'Date');
    dataMembers.addColumn('number', 'Users');
    dataMembers.addRows([
        ['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
    ]);    
    var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
    membersChart.draw(dataMembers, options);
}
body {
  background-color: #000000;
}

#membersChart {
  height: 600px;
  width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="membersChart"></div>
...