修复初始数据为空时，改变数据无法正确重新渲染的问题 #27

Means88 · 2017-03-28T08:54:47Z

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单线图</title>
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.2.6/g2.js"></script>
  </head>
  <body>
    <div id="c1"></div>
    <div id="button"></div>
    <script>
      var data = [];
      // ***** 加上这里 *****
      var newData = [
        {month: 'Jan', temperature: 7.0},
        {month: 'Feb', temperature: 6.9},
        {month: 'Mar', temperature: 9.5},
        {month: 'Apr', temperature: 14.5},
        {month: 'May', temperature: 18.2},
        {month: 'Jun', temperature: 21.5},
        {month: 'Jul', temperature: 25.2},
        {month: 'Aug', temperature: 26.5},
        {month: 'Sep', temperature: 23.3},
        {month: 'Oct', temperature: 18.3},
        {month: 'Nov', temperature: 13.9},
        {month: 'Dec', temperature: 9.6}
      ];
      var chart = new G2.Chart({
        id: 'c1',
        forceFit: true,
        height: 450
      });
      chart.source(data, {
        month: {
          alias: '月份',
          range: [0, 1]
        },
        temperature: {
          alias: '平均温度(°C)'
        }
      });
      chart.line().position('month*temperature').size(2);
      chart.render();
      // ***** 改变数据 *****
      chart.changeData(newData);
    </script>
  </body>
</html>

改变数据后的效果是这样的

jaredleechn · 2017-03-29T10:02:03Z

👍

这个问题的确很多用户有问到，一直觉得 { this.state.data.length && <Chart /> } 这种方式非常不优雅

但是这样的话，如果中途数据从空变为有意义的数据，就会导致一次 destory，receiveProps 里面判断第一次 nextProps 是有意义的数据，然后执行 init？

cc @simaQ 怎么看

Means88 added 2 commits March 28, 2017 16:24

fix render problem of empty data

f89078b

remove chartId before unmount

0863aa3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

修复初始数据为空时，改变数据无法正确重新渲染的问题 #27

修复初始数据为空时，改变数据无法正确重新渲染的问题 #27

Uh oh!

Means88 commented Mar 28, 2017

Uh oh!

jaredleechn commented Mar 29, 2017

Uh oh!

Uh oh!

修复初始数据为空时，改变数据无法正确重新渲染的问题 #27

Are you sure you want to change the base?

修复初始数据为空时，改变数据无法正确重新渲染的问题 #27

Uh oh!

Conversation

Means88 commented Mar 28, 2017

Uh oh!

jaredleechn commented Mar 29, 2017

Uh oh!

Uh oh!