如何在反应谷歌图表中根据散点图中的某个范围值显示点颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在反应谷歌图表中根据散点图中的某个范围值显示点颜色相关的知识，希望对你有一定的参考价值。
我试图使用React Google Charts在反应js中显示散点图
https://react-google-charts.com/scatter-chart
它显示正确。但我希望每个点的颜色根据范围值如下 -
> range .1-2.5 - all points on plot should be green (for x and y both)
>
> range 2.6-3.5 - all points should be red for both x and y
>
> range 3.6-5 - all point should be black.....and so on
有一种颜色选项，但它会改变相同颜色的所有点
import React from 'react';
import Chart from "react-google-charts";
const data = [
['X', 'Y'],
[0.785882, 0.355928],
[0.785882, 0.346507],
[0.785882, 0.355928],
[0.785882, 0.703251],
[0.785028, 0.599739],
[0.785028, 0.512527],
[0.785882, 0.346507],
[0.785882, 0.346507],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.890500, 0.556761],
[0.785882, 0.613288],
[0.785028, 0.599739],
[0.890500, 0.598812],
[0.785028, 0.643674],
];
const options = {
title: "Company Performance",
curveType: "function",
colors: ['#f44253'],
hAxis: { title: 'Age' },
vAxis: { title: 'Weight'},
legend:'none',
};
class Graph1 extends React.Component {
render() {
return (
<div className="App">
<Chart
chartType="ScatterChart"
width="80%"
height="400px"
data={data}
options={options}
legendToggle
/>
</div>
);
}
}
export default Graph1
我试过Change point colour based on value for Google Scatter Chart。但能够做出反应
答案
您可以将列添加到数据数组，类似于您找到的示例， 然后根据行的值添加颜色。
const data = [
['X', 'Y'],
[0.785882, 0.355928],
[0.785882, 0.346507],
[0.785882, 0.355928],
[0.785882, 0.703251],
[0.785028, 0.599739],
[0.785028, 0.512527],
[0.785882, 0.346507],
[0.785882, 0.346507],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.890500, 0.556761],
[0.785882, 0.613288],
[0.785028, 0.599739],
[0.890500, 0.598812],
[0.785028, 0.643674],
];
data.forEach(function (row, index) {
if (index === 0) {
// add column heading
row.push({
role: 'style',
type: 'string'
});
} else {
// add color for row
if ((row[1] >= .1) && (row[1] <= 2.5)) {
row.push('green');
} else if ((row[1] > 2.5) && (row[1] <= 3.5)) {
row.push('red');
} else {
row.push('black');
}
}
});
虽然没有反应，请参阅以下工作片段， 工作原理相同......
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
const data = [
['X', 'Y'],
[0.785882, 0.355928],
[0.785882, 0.346507],
[0.785882, 0.355928],
[0.785882, 0.703251],
[0.785028, 0.599739],
[0.785028, 0.512527],
[0.785882, 0.346507],
[0.785882, 0.346507],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.785882, 0.355928],
[0.890500, 0.556761],
[0.785882, 0.613288],
[0.785028, 0.599739],
[0.890500, 0.598812],
[0.785028, 0.643674],
];
data.forEach(function (row, index) {
if (index === 0) {
// add column heading
row.push({
role: 'style',
type: 'string'
});
} else {
// add color for row
if ((row[1] >= .1) && (row[1] <= 2.5)) {
row.push('green');
} else if ((row[1] > 2.5) && (row[1] <= 3.5)) {
row.push('red');
} else {
row.push('black');
}
}
});
var dataTable = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(dataTable, {
legend: {
position: 'none'
}
});
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>以上是关于如何在反应谷歌图表中根据散点图中的某个范围值显示点颜色的主要内容，如果未能解决你的问题，请参考以下文章