我正在使用Google Charts生成简单的散点图。我有很多要点,我只想将hAxis设置为正。目前有一个列表[0,20,40,60,80,100,-20,-40,-60,-80,-100]等
我想显示所有点,但带有自定义hAxis标签,例如:[0,20,40,60,80,100,0,20,40,60,80,100]
我想让自己的图表看起来像自爆
但目前我的散点图看起来像
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[ -0.5,1],
[100,1],
[-80,2],
[25,2],
[-20,3],
[40,3],
[-0.5,4],
[80,4],
[-40,5],
[20,5],
[-0.5,6],
[80,6],
[-10,7],
[90,7],
[-70,8],
[60,8],
]);
// Set chart options
var options = {
title: 'guilt experience Vs eat satisfaction',
titlePosition: 'none',
position:'center',
hAxis: {title: '', minValue: 0, maxValue: 15,ticks: [0,20,40,60,80,100,-20,-40,-60,-80,-100]},
vAxis: {title: '', minValue: 0, ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8]},
legend: {position: 'none'},
};
// Instantiate and draw the chart.
var container = document.getElementById('chart_div');
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
var layout = chart.getChartLayoutInterface();
for (var i = -0; i < data.getNumberOfRows(); i++) {
// add image above every fifth element
var xPos = layout.getXLocation(data.getValue(i, 0));
var yPos = layout.getYLocation(data.getValue(i, 1));
var zPos = 20;
//var yPos = layout.getYLocation(data.getValue(i, 1));
var whiteHat = container.appendChild(document.createElement('img'));
var experience = container.appendChild(document.createElement('img'));
if(data.getValue(i, 0) < 0){
whiteHat.src = 'https://i.imgur.com/LqiTeQI.png';
}else{
whiteHat.src = 'https://i.imgur.com/rACTObW.png';
}
if(i % 3 == 0){
experience.src = 'https://i.imgur.com/X286vZE.png';
}else{
experience.src = 'https://i.imgur.com/WHGsnvZ.png';
}
whiteHat.style.position = 'absolute';
whiteHat.style.height = '15px';
whiteHat.style.width = '15px';
experience.style.position = 'absolute';
experience.style.height = '16px';
experience.style.width = '16px';
// 16x16 (image size in this example)
whiteHat.style.top = (yPos) + 'px';
whiteHat.style.left = (xPos) + 'px';
experience.style.top = (yPos) + 'px';
experience.style.left = (zPos) + 'px';
}
});
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart', 'scatter']
});
</script>
<div id="chart_div" ></div>
我想将haxis负标签显示为正标签