最佳答案
在用来绘制图表的数据表中,
我们可以使用具有注释作用的隐藏系列。
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});
我们对隐藏序列使用零值。
这会将注释放置在 x 轴上。
然后我们给注解一个值,比如'A'
,这样注解就被绘制出来了。
绘制橙色刻度,并隐藏注释值,
我们使用以下注释选项...
annotations: {
boxStyle: {
fill: '#f57c00',
stroke: '#f57c00',
strokeWidth: 1
},
stem: {
length: 0
},
textStyle: {
color: 'transparent',
fontSize: 16
},
},
您可以使用fontSize
来改变注释的大小。
防止隐藏的系列被绘制,
我们使用以下选项...
series: {
1: {
color: 'transparent',
visibleInLegend: false,
enableInteractivity: false
}
},
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
['2010-01-01', 10, 0, 'A'],
['2012-01-01', 4, 0, 'A'],
['2014-01-01', 26, 0, 'A'],
['2016-01-01', 50, 0, 'A'],
['2018-01-01', 75, 0, 'A']
]);
var options = {
annotations: {
boxStyle: {
fill: '#f57c00',
stroke: '#f57c00',
strokeWidth: 1
},
stem: {
length: 0
},
textStyle: {
color: 'transparent',
fontSize: 12
},
},
chartArea: {
left: 80,
top: 56,
right: 32,
bottom: 80,
height: '100%',
width: '100%'
},
hAxis: {
title: 'Date'
},
height: '100%',
legend: {
position: 'none'
},
series: {
1: {
color: 'transparent',
visibleInLegend: false,
enableInteractivity: false
}
},
title: 'value vs. Date',
vAxis: {
title: 'value'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
编辑
另一种选择是在每个刻度位置绘制方形点,
正如@dlaliberte 所建议的
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'tick series');
data.addRows([
['2010-01-01', 10, 0],
['2012-01-01', 4, 0],
['2014-01-01', 26, 0],
['2016-01-01', 50, 0],
['2018-01-01', 75, 0]
]);
var options = {
chartArea: {
left: 80,
top: 56,
right: 32,
bottom: 80,
height: '100%',
width: '100%'
},
hAxis: {
title: 'Date'
},
height: '100%',
legend: {
position: 'none'
},
series: {
1: {
color: '#f57c00',
lineWidth: 0,
pointSize: 12,
pointShape: 'square',
visibleInLegend: false,
enableInteractivity: false
}
},
title: 'value vs. Date',
vAxis: {
title: 'value'
},
width: '100%'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
window.addEventListener('resize', function () {
chart.draw(data, options);
});
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
关于javascript - 如何在 react-google-charts 中绘制与主要刻度、刻度长度、位置、颜色等刻度相关的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63897692/