我已使用以下设置创建了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);
}
我已经做了很多实验,但是我无法找出它们的外观以及如何从图表中删除它们。或者至少更改其颜色以匹配其余网格线。
答案 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>