时间戳

首页 > 解决方案 > 是否可以在图形区域添加两种颜色或在点中有两种颜色？

reactjs - 是否可以在图形区域添加两种颜色或在点中有两种颜色？

问题描述

我创建了一个带有 react-google-charts 图表的 react 组件。

这是一个简单的图形。它有这些数据和这些选项。

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 年开始，该图的区域显示为灰色，如果不能显示，则点变为灰色。

这个有可能？有任何想法吗？

谢谢

标签： reactjschartsgoogle-visualization

解决方案

您可以使用值列之后的样式列轻松更改点。
使用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>

推荐阅读