Можно ли добавить два цвета в графическую область или иметь два цвета в точках? - PullRequest
Новая
       13

Можно ли добавить два цвета в графическую область или иметь два цвета в точках?

0 голосов
/ 25 октября 2018

Я создал компонент реагирования с графиком реакции-гугл-диаграмм.

Это простая графика.У него есть эти данные и эти параметры. 

const options = {
        annotations: {
          stem: {
            color: '#097138'
          },
          style: 'line'
        },
        legend: 'none',
        chartArea:{
            top:5,
            width:"80%",
            height:"80%"
          }
      };

const data = [
            ['Year', {role: 'annotation', type: 'string'}, 'Value'],
            ['2020', null, 48.92],
            ['2025', '5 years', 49.45],
            ['2030', null, 49.24],
            ['2035', null, 50.93],
            ['2040', null, 49.62]
          ];

А вот и результат с компонентом Chart. 

        return (
            <div >
               <Chart
                    chartType="ScatterChart"
                    data={data}
                    width={width}
                    height={height}
                    options={options}/>
            </div>
        );

Этот график показывает данные за год, и Мне это нужнос 2025 года область графика отображается серым цветом , и если этого не может быть, то точки становятся серыми.

Это возможно?Есть идеи?

Спасибо

1 Ответ

0 голосов
/ 25 октября 2018

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

const data = [
  ['Year', {role: 'annotation', type: 'string'}, 'Value', {role: 'style', type: 'string'}],
  ['2020', null, 48.92, null],
  ['2025', '5 years', 49.45, null],
  ['2030', null, 49.24, 'gray'],
  ['2035', null, 50.93, 'gray'],
  ['2040', null, 49.62, 'gray']
];

см. Следующий рабочий фрагмент для примера ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value', {role: 'style', type: 'string'}],
    ['2020', null, 48.92, null],
    ['2025', '5 years', 49.45, null],
    ['2030', null, 49.24, 'gray'],
    ['2035', null, 50.93, 'gray'],
    ['2040', null, 49.62, 'gray']
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    chartArea:{
      top:5,
      width:"80%",
      height:"80%"
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

РЕДАКТИРОВАТЬ

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

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

    series: {
      1: {
        areaOpacity: 0.6,
        color: 'gray',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      }
    }

см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value', 'Area'],
    ['2020', null, 48.92, null],
    ['2025', '5 years', 49.45, 51],
    ['2030', null, 49.24, 51],
    ['2035', null, 50.93, 51],
    ['2040', null, 49.62, 51]
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    chartArea:{
      top:5,
      width:"80%",
      height:"80%"
    },
    series: {
      1: {
        areaOpacity: 0.6,
        color: 'gray',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      }
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...