Question

我正在尝试使用React Google Charts在React 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。但能够做出反应

Answer 1

您可以将列添加到数据数组中，类似于找到的示例，
然后根据行的值添加颜色。

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>

如何根据React Google Chart中的散点图中的某个范围值显示点颜色

1 个答案: