Как отобразить цвет точек в соответствии с некоторым значением диапазона в точечной диаграмме в Google Analytics - PullRequest
Новая
       15

Как отобразить цвет точек в соответствии с некоторым значением диапазона в точечной диаграмме в Google Analytics

1 голос
/ 30 апреля 2019

Я пытаюсь отобразить точечную диаграмму в реакциях JS с помощью React Google Charts

https://react -google-charts.com / scatter-chart

itотображается правильно. но я хочу, чтобы цвет каждой точки соответствовал значению диапазона, например - 

> 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

Я пробовал Изменение цвета точки в зависимости от значения для Google Scatter Chart .но умеет реагировать

1 Ответ

0 голосов
/ 30 апреля 2019

вы можете добавить столбец в ваш массив данных, как в примере, который вы нашли,
, а затем добавить цвет в зависимости от значения строки.

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>
...