Google折线图。删除多余的网格线或更改其颜色

时间:2018-11-20 22:22:29

标签: charts google-visualization

我已使用以下设置创建了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 :(得分:3)

这些是-> 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>