Question

我正在将数据发送到我们的B / e，并根据响应中接收到的现成的Google图表进行

<div id='chart'></div>

<script type='text/javascript'>
  google.load('visualization', '1.0', {packages: ['corechart'], callback: draw_chart});
  function draw_chart() {
    var data_table = new google.visualization.DataTable();data_table.addColumn({"type":"string","label":"Item"});data_table.addColumn({"type":"number","label":"Score"});data_table.addColumn({"type":"string","label":"annotation","id":"annotations","role":"annotation"});
    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    google.visualization.events.addListener(chart, 'select', function(e) { chart_on_select(e, chart, data_table); });
    google.visualization.events.addListener(chart, 'click', function(e) { chart_on_click(e, chart, data_table); });
    chart.draw(data_table, {colors: ["#4097D8"], backgroundColor: "#353A3F", chartArea: {width: "100%"}, annotations: {alwaysOutside: true, textStyle: {fontSize: 14, color: "#FFF", bold: true}}, legend: {position: "none"}, hAxis: {textStyle: {fontSize: 14, color: "#FFF", bold: true}, textPosition: "out", gridlines: {color: "transparent"}}, vAxis: {baselineColor: "#595E62", textPosition: "none", gridlines: {color: "transparent"}}, bar: {groupWidth: "98%"}, tooltip: {trigger: "none"}});
  };
</script>

在jquery中，当我使用html（）函数在页面上插入此原始数据时，它工作得很好，但是在React中，它不显示图表，只是空白。有人可以协助我如何在React中正确显示图表吗？

我有这样的React组件：

class Chart extends Component {
  constructor(props) {
  }

  componentDidMount() {
    const params = {
      "data": this.props.data,
    };
    axios.get('/get_chart', params).then(({ data }) => {
      // data it is the code above
      let div = document.createElement('div');
      div.setAttribute('class', 'post block bc2');
      div.innerHTML = data;
      document.getElementById('chart-container').appendChild(div);
    })
  }

  render() {

    return (
        <div>
          <div id='chart-container'>

          </div>
        </div>
    );
  }
}

是否可以在react模板中绘制Google图表？

0 个答案: