在 React google 图表中隐藏列

Question

在常规 google 图表中，我曾经在 google 图表中隐藏不想通过以下步骤显示的列。

view = new google.visualization.DataView(data);
view.hideColumns([2]);
chart.draw(view, options)

现在我正在开发 React 应用程序并使用（React google 图表）但找不到隐藏特定列的选项，例如图表中的列 ID图表，我可以将其从 Json 数据中删除，但稍后当用户单击图表进行向下钻取时我需要该值。

import React from "react";
import { Chart } from "react-google-charts";

const data = [
      {
        Element: "Copper",
        Density: 12,
        Id: 1,
      },
      {
        Element: "Silver",
        Density: 18,
        Id: 2,
      },
      {
        Element: "Gold",
        Density: 13,
        Id: 3,
      },
      {
        Element: "Platinum",
        Density: 9,
        Id: 4,
      }
    ];

    const result = [["Element", "Density", "Id"]];

    for (let i = 0; i < data.length; i++) {
      result.push([data[i].Element, data[i].Density, data[i].Id]);
    }

export function App() {
  return (
    <Chart chartType="ColumnChart" width="100%" height="400px" data={result} />
  );
}

Answer 1

您可以使用单元格属性来存储 ID。
然后使用 getProperty 方法检索值。

使用对象表示法提供列值。
你可以使用任何列。
其中 v: 是列值，p: 是单元格的属性。

[{v: "Copper", p: {"Id": 1}}, 100]

稍后...

data.getProperty(0, 0, "Id")

请参阅以下工作片段，
虽然没有反应，但效果一样。
单击图表列以在控制台中查看 id...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var data = [
    ["Element", "Density"],
    [{v: "Copper", p: {"Id": 1}}, 100],
    [{v: "Silver", p: {"Id": 2}}, 100],
    [{v: "Gold", p: {"Id": 3}}, 100],
    [{v: "Platinum", p: {"Id": 4}}, 100]
  ];

  var dataTable = google.visualization.arrayToDataTable(data);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var row = selection[0].row;
      var id = dataTable.getProperty(row, 0, "Id");
      console.log("id =", id);
    }
  });

  chart.draw(dataTable);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

编辑

构建数据时，使用如上所述的对象表示法...

const data = [
  {
    Element: "Copper",
    Density: 12,
    Id: 1,
  },
  {
    Element: "Silver",
    Density: 18,
    Id: 2,
  },
  {
    Element: "Gold",
    Density: 13,
    Id: 3,
  },
  {
    Element: "Platinum",
    Density: 9,
    Id: 4,
  }
];

const result = [["Element", "Density"]];

for (let i = 0; i < data.length; i++) {
  // use object notation to provide value and id property
  result.push([{v: data[i].Element, p: {Id: data[i].Id}}, data[i].Density]);
}

在 React google 图表中隐藏列

Hide column in react google charts

charts

google-visualization

reactjs

react-google-charts