antvis/G2

设置柱状图的domain,导致底部超出坐标轴范围 #5708

ryanregal posted onGitHub

问题描述

下面是我的代码,我希望可以自定义我的y轴的domain,我在设置甘特图和折线图时,均运行无误,但是当我设置column/bar这种类型的图标时,它的底端超过了坐标轴的范围。应该如何解决这一问题?

      var chart = new G2.Chart({
        container: "container",
      });

      function changechart()
            {
                chart.clear();
                ChartScript();
                chart.render();    
            }

      function ChartScript()
      {
        var mydata=[

        { item: "a1", value: 9.1, type: "actualvalue"},
        { item: "a1", value: 0.2, type: "value" },
        { item: "a2", value: 9.3, type: "actualvalue"},
        { item: "a2", value: 0.4, type: "value" },

        ]
                var data=mydata;
                var datatrue=[];
                var colorStr=[];
                data.forEach(function(itemold)
                {
                    if(itemold.hasOwnProperty('color'))
                    {
                        if(datatrue.some(item => item.type === itemold["type"])==false )
                        {
                            colorStr.push([itemold["type"],itemold["color"]]);    
                        }
                    }
                    datatrue.push({"item":itemold["item"],"type":itemold["type"],"value":itemold["value"]});                                
                })
                chart.data(datatrue);
                chart.options({
                    type: "interval",
                    theme: "classic",
                    autoFit: true,
                    padding:80,
                    encode: { x: 'item', y: "value", color: "type" },
                    transform: [{ type: "stackY" }],
                    scale: {y:{domain:[9,10]},'color':{relations: colorStr}},
                    axis: { x: { title: false} , y: { title: "Unit", titlePosition:'top'} },
                    tooltip: { title:"type",items: [{ field: 'value' }] },
                    legend: { color: { title: false,position:'bottom',layout: { justifyContent: 'center'} },}
                });
      }
      changechart();

重现链接

No response

重现步骤

No response

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

捕获

补充说明(可选)

No response


chart.options({
  scale: {
    y: {
      domain: [9, 10],
      clamp: true, // 新增这一行
    },
  },
});
posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests