Как показать два разных цвета в Google Scatter?
Не используйте int. Файлы размером более 2 гигабайт обычно являются грязными в настоящее время
Не используйте unsigned int. Файлы размером более 4 гигабайт являются общими, поскольку некоторые немного менее распространенные загрязнения
. IIRC стандартная библиотека определяет off_t как неподписанное 64-битное целое число, что и должно использовать каждый. Мы можем переопределить это до 128 бит за несколько лет, когда мы начнем работать с 16 файлами exabyte.
Если вы находитесь в окнах, вы должны использовать GetFileSizeEx - это на самом деле использует подписанное 64-битное целое число, поэтому они начнут сталкиваться с проблемами с 8 файлами exabyte. Глупый Microsoft! : -)
1 ответ
чтобы добавить фоновые цвета к диаграмме, мы можем использовать ряд 'area',
один для положительного цвета и один для отрицательного.
после загрузки начальных данных,
добавить два дополнительных столбца.
добавьте строки / значения для этих столбцов для всего диапазона диаграммы.
используйте null для исходного значения столбца.
// 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]);
в опциях добавьте следующие опции ...
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'}
}
затем при размещении маркеров изображения игнорируйте столбцы, где исходное значение равно null.
// exclude null values
var yValue = data.getValue(i, 1);
if (yValue !== null) {
var xPos = layout.getXLocation(data.getValue(i, 0));
...
см. Следующий рабочий фрагмент ...
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>