问题
I am using Google Charts for a simple scatter Chart. I want two different color in chart. how we add add to tow different background color. i need to add background for negative section red color and add green color for positive value section
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],
[60, 8],
]);
// Set chart options
var options = {
title: 'guilt experience Vs eat satisfaction',
titlePosition: 'none',
position: 'center',
hAxis: {
title: 'Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value',
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 whiteHat = 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';
}
whiteHat.style.position = 'absolute';
whiteHat.style.height = '15px';
whiteHat.style.width = '15px';
// 16x16 (image size in this example)
whiteHat.style.top = (yPos) + 'px';
whiteHat.style.left = (xPos) + '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>I want to add different background color like above image positive section different color and negative section different color
回答1:
to add background colors to the chart, we can use an 'area' series,
one for the positive color and one for the negative.
after the initial data has been loaded,
add two additional columns.
add rows / values for these columns for the full range of the chart.
use null for the original column value.
// add columns & rows for background
data.addColumn('number', '');
data.addRow([0, null, 8]);
data.addRow([-100, null, 8]);
data.addColumn('number', '');
data.addRow([0, null, null, 8]);
data.addRow([100, null, null, 8]);
in the options, add the following options...
colors: ['blue', 'red', 'green'], // colors for the series
lineWidth: 0, // remove line for top of area series
pointSize: 0, // remove points on area series
series: { // change last two series to area
1: {type: 'area'},
2: {type: 'area'}
}
then when placing the image markers, ignore columns where the original value is null.
// exclude null values
var yValue = data.getValue(i, 1);
if (yValue !== null) {
var xPos = layout.getXLocation(data.getValue(i, 0));
...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[-0.5, 1],
[100, 1],
[-80, 2],
[25, 2],
[60, 8],
]);
// add columns & rows for background
data.addColumn('number', '');
data.addRow([0, null, 8]);
data.addRow([-100, null, 8]);
data.addColumn('number', '');
data.addRow([0, null, null, 8]);
data.addRow([100, null, null, 8]);
var options = {
title: 'guilt experience Vs eat satisfaction',
titlePosition: 'none',
position: 'center',
hAxis: {
title: 'Guilt Value\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Eat Value',
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'
},
colors: ['blue', 'red', 'green'],
lineWidth: 0,
pointSize: 0,
series: {
1: {type: 'area'},
2: {type: 'area'}
}
};
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++) {
// exclude null values
var yValue = data.getValue(i, 1);
if (yValue !== null) {
var xPos = layout.getXLocation(data.getValue(i, 0));
var yPos = layout.getYLocation(yValue);
var whiteHat = 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';
}
whiteHat.style.position = 'absolute';
whiteHat.style.height = '15px';
whiteHat.style.width = '15px';
whiteHat.style.top = (yPos) + 'px';
whiteHat.style.left = (xPos) + 'px';
}
}
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>来源：https://stackoverflow.com/questions/55226099/how-to-show-two-different-color-in-scatter-google-charts