Question

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

这可能吗？有什么想法吗？

谢谢

Answer 1

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

是否可以在图形区域添加两种颜色或在点处具有两种颜色？

1 个答案: