缩放zingchart条形图后，如何去除X轴以下的部分图形？

Question

我正在使用 zingchart 条形图。但在缩放后，部分图形仍保留在 X 轴下。

图表配置如下：

{
"graphset":[
    {
        "type":"bar",
        "plotarea":{
            "adjust-layout":true
        },
        "background-color":"#fff",
        "plot":{
            "alpha":0.9,
            "border-width":1,
            "border-color":"black",
            "border-radius-top-left":4,
            "border-radius-top-right":4,
            "hoverState":{
                "backgroundColor":"#909090",
                "visible":true
            },
            "bar-width":"20px",
            "bar-space":"50px",
            "background-fit":"x",
            "animation":{
                "effect":"ANIMATION_EXPAND_BOTTOM"
            }
        },
        "scale-x":{
            "zooming":true,
            "label":{
                "text":"Location",
                "font-color":"#000",
                "font-size":"16px",
                "text-align":"center"
            },
            "values":[" HYDERABAD"," GURGAON"," JAIPUR"," BANGALORE"," KOLKATA"],
            "line-color":"#CCC",
            "tick":{
                "line-color":"#a6a6a6",
                "line-width":1,
                "visible":0
            },
            "guide":{
                "line-color":"#666",
                "line-style":"solid"
            },
            "item":{
                "font-family":"arial",
                "font-color":"#000",
                "background-color":"rgba(255,255,255,.9)"
            }
        },
        "scale-y":{
            "zooming":true,
            "label":{
                "text":"Attrition %age",
                "font-color":"#2B776C",
                "font-size":"16px"
            },
            "line-color":"#CCC",
            "tick":{
                "visible":false
            },
            "guide":{
                "line-style":"dashed",
                "line-color":"#ccc"
            },
            "item":{
                "font-family":"arial",
                "font-color":"#8B8B8B"
            },
            "zoom-to":[30.5,34.5]
        },
        "series":[
            {
                "values":[32.76,33.98,33.78,32.84,30.53],
                "background-color":"#6cebb3",
                "marker":{
                    "background-color":"#6cebb3",
                    "size":5
                },
                "value-box":{
                    "font-color":"#6cebb3",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#6cebb3",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 60 Days for location %kl"
                }
            },
            {
                "values":[34.04,33.63,32.93,33.93,32.25],
                "background-color":"#ff9b67",
                "marker":{
                    "background-color":"#ff9b67",
                    "size":4
                },
                "value-box":{
                    "font-color":"#ff9b67",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff9b67",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 60 Days for location %kl"
                }
            },
            {
                "values":[33.5,33.08,32.93,33.13,33.73],
                "background-color":"#ff3b3b",
                "marker":{
                    "background-color":"#ff3b3b",
                    "size":3
                },
                "value-box":{
                    "font-color":"#ff3b3b",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff3b3b",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 60 Days for location %kl"
                }
            }
        ]
    }
]
}

如何删除它？

Answer 1

将属性 "maskTolerance: [0, 0]" 添加到您的 plotarea 对象。这会切断您的绘图区域中任何多余的绘图。

缩放zingchart条形图后，如何去除X轴以下的部分图形？

After zooming zingchart bar graph, How to remove part of graph below the X-axis?

javascript

zingchart