chart对象的scale设置了minLimit属性后堆叠图图显示异常

[ruipeng110]

• bizcharts Version:官网在线编辑器 在设置scale设置minlimit后，图表下移，图片能明显看出来堆叠图显示有问题。

下面是代码：

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";

class Percentage extends React.Component {
  render() {
    const { DataView } = DataSet;
    const data = [
      {
        country: "Asia",
        year: "1750",
        value: 502
      },
      {
        country: "Asia",
        year: "1800",
        value: 635
      },
      {
        country: "Asia",
        year: "1850",
        value: 809
      },
      {
        country: "Asia",
        year: "1900",
        value: 947
      },
      {
        country: "Asia",
        year: "1950",
        value: 1402
      },
      {
        country: "Asia",
        year: "1999",
        value: 3634
      },
      {
        country: "Asia",
        year: "2050",
        value: 5268
      },
      {
        country: "Africa",
        year: "1750",
        value: 106
      },
      {
        country: "Africa",
        year: "1800",
        value: 107
      },
      {
        country: "Africa",
        year: "1850",
        value: 111
      },
      {
        country: "Africa",
        year: "1900",
        value: 133
      },
      {
        country: "Africa",
        year: "1950",
        value: 221
      },
      {
        country: "Africa",
        year: "1999",
        value: 767
      },
      {
        country: "Africa",
        year: "2050",
        value: 1766
      },
      {
        country: "Europe",
        year: "1750",
        value: 16300
      },
      {
        country: "Europe",
        year: "1800",
        value: 20300
      },
      {
        country: "Europe",
        year: "1850",
        value: 27600
      },
      {
        country: "Europe",
        year: "1900",
        value: 40800
      },
      {
        country: "Europe",
        year: "1950",
        value: 54700
      },
      {
        country: "Europe",
        year: "1999",
        value: 72900
      },
      {
        country: "Europe",
        year: "2050",
        value: 62800
      }
    ];
    const dv = new DataView().source(data);

    const cols = {
      year: {
        type: "linear",
        tickInterval: 50
      },
      percent: {
        formatter: function(value) {
          value = value || 0;
          value = value * 100;
          return parseInt(value);
        },
        alias: "percent(%)"
      }
    };
    return (
      <div>
        <Chart height={window.innerHeight} data={dv} forceFit scale={{value:{minLimit:10000,min:10000}}}>
          <Axis name="year" />
          <Axis name="value" />
          <Legend />
          <Tooltip
            crosshairs={{
              type: "line"
            }}
          />
          <Geom type="areaStack" position="year*value" color="country" />
          <Geom
            type="lineStack"
            position="year*percent"
            size={2}
            color="country"
          />
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Percentage />, mountNode)

[gavrichenko]

yep, i have a same issue. I think it's related with min and max params by Y-Axis.

[ruipeng110]

I have resolved this problem using a method below.

import React from "react"; import { G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util } from "bizcharts"; import DataSet from "@antv/data-set";

class Percentage extends React.Component { render() { const { DataView } = DataSet; const data = [ { country: "Asia", year: "1750", value: 502 }, { country: "Asia", year: "1800", value: 635 }, { country: "Asia", year: "1850", value: 809 }, { country: "Asia", year: "1900", value: 947 }, { country: "Asia", year: "1950", value: 1402 }, { country: "Asia", year: "1999", value: 3634 }, { country: "Asia", year: "2050", value: 5268 }, { country: "Africa", year: "1750", value: 106 }, { country: "Africa", year: "1800", value: 107 }, { country: "Africa", year: "1850", value: 111 }, { country: "Africa", year: "1900", value: 133 }, { country: "Africa", year: "1950", value: 221 }, { country: "Africa", year: "1999", value: 767 }, { country: "Africa", year: "2050", value: 1766 }, { country: "Europe", year: "1750", value: 16300 }, { country: "Europe", year: "1800", value: 20300 }, { country: "Europe", year: "1850", value: 27600 }, { country: "Europe", year: "1900", value: 40800 }, { country: "Europe", year: "1950", value: 54700 }, { country: "Europe", year: "1999", value: 72900 }, { country: "Europe", year: "2050", value: 62800 } ];

const down = 10000

data.forEach(x=>{
  if(x.country === 'Europe'){
    x.value = x.value - down
  }
})

const formatter = {
    formatter: value => {
        return Number.parseInt(value) + down;
    },
};

const dv = new DataView().source(data);

const cols = {
  year: {
    type: "linear",
    tickInterval: 50
  },
  percent: {
    formatter: function(value) {
      value = value || 0;
      value = value * 100;
      return parseInt(value);
    },
    alias: "percent(%)"
  }
};

return (
  <div>
    <Chart height={window.innerHeight} data={dv} forceFit >
      <Axis name="year" />
      <Axis name="value" label={formatter}/>
      <Legend />
      <Tooltip
        crosshairs={{
          type: "line"
        }}
      />
      <Geom type="areaStack" position="year*value" color="country" 

        tooltip={['year*value*country', (time, sp, lane) => {
            if(lane === 'Europe') {
              sp = sp + down
            }
            return {
              title: time,
              //自定义 tooltip 上显示的 title 显示内容等。
              name: lane,
              value: sp
            };
          }]}

        />
      <Geom
        type="lineStack"
        position="year*percent"
        size={2}
        color="country"
      />
    </Chart>
  </div>
);

} }

ReactDOM.render(, mountNode)

First, all of Europe's value minus 10000. Second, Axis's label plus 10000. Third, Custom Geom's tooltip, it's could make tooltip looks good.