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

tzcvj98z 于 2023-02-04 发布在其他

关注(0)|答案(2)|浏览(268)

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)

BizCharts

来源：https://github.com/alibaba/BizCharts/issues/967

2条答案

按热度按时间

1tuwyuhd1#

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

赞(0）回复(0）举报 2023-02-04

lztngnrs2#

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.

赞(0）回复(0）举报 2023-02-04

我来回答

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

2条答案

相关问题

热门标签

最新问答