Question

我有一个带有顶部放置值框的混合图表。在除第一个值之外的所有值上，背景颜色已从值框中消失。这之前工作正常，因为白色背景显示在所有值框后面，并且代码没有变化，所以我不知道为什么背景颜色突然消失了。以下是显示该问题的代码。如何解决这个问题的任何帮助或指示将不胜感激。

var maxYValue = 60;
var value1 = 40;
var value2 = 15;
var value3 = 34;
var value4 = 14;
var value5 = 20;
var zones = {
    "type": "mixed",
    "font-family": "proxima_nova_rgregular",
    "title": {
        "text": "MINUTES IN ZONES",
        "font-family": "proxima_nova_rgregular",
        "background-color": "none",
        "font-color": "#39393d",
        "font-size": "22px",
        "adjustLayout": true
    },
    "plot": {
        "borderRadius": "5px 5px 0 0",
        "bar-width": '50%',
        "animation": {
            "delay": 300,
            "effect": 11,
            "speed": "500",
            "method": "0",
            "sequence": "3",
            "z-index": 2
        },
        "value-box": {
            "placement": "top-out",
            "text": "%v",
            "decimals": 0,
            "font-color": "#35353b",
            "font-size": "14px",
            "alpha": 1,
            "background-color": "#ffffff",
            "padding": "5px 5px 0px 5px",
            "shadow": false,
            "z-index": 4
        }
    },
    "plotarea": {
        "border-left": "3px solid #39393d",
        "border-bottom": "3px solid #39393d",
        "padding-left": "3px",
        "margin": "dynamic",
        "background-color": "none"
    },
    "tooltip": {
        "visible": false
    },
    "scale-x": {
        "placement": "opposite",
        "labels":["Zone 1","Zone 2","Zone 3","Zone 4","Zone 5"],
        "line-width": 0,
        "tick": {
            "visible": false
        },
        "guide": {
            "visible": false
        },
        "item": {
            "offsetY": 25,
            "font-size": 12,
            "fontColor": 'black',
            "bold": true
        },
    },
    "scale-y": {
        "offsetEnd": 45,
        "max-value": maxYValue,
        "visible": false,
        "line-width": 0,
        "guide": {
            "visible": false
        }
    },
    "series": [
        {
            "type": "bar",
            "values": [
                value1, value2, value3, value4, value5
            ],
            "background-color": "#cdcccc",
            "z-index": 2,
            "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
        },
        {
            "type": "line",
            "line-color": "gray",
            "marker": {
                "backgroundColor":"white",
                "borderWidth": 2,
                "border-color": "#35353b",
                "visible": false,
                "rules":[
                    {
                        "rule":" %node-index%3 == 1 ",
                        "visible": true,
                        "size": 7,
                        "offset-y": -15
                    }
                ]

            },
            "value-box": {
                "visible": 0
            },
            "values": [
                [0, value1 + 2],
                [0, maxYValue],
                [0, null],
                [1, value2 + 2],
                [1, maxYValue],
                [1, null],
                [2, value3 + 2],
                [2, maxYValue],
                [2, null],
                [3, value4 + 2],
                [3, maxYValue],
                [3, null],
                [4, value5 + 2],
                [4, maxYValue],
                [4, null],
            ]
        }
    ]
}
zingchart.render({
    id : 'zones',
    data : zones,
    height: "320",
    width: "100%",
    output : 'canvas'
});

<script src="https://cdn.zingchart.com/2.5.2/zingchart.min.js"></script>
<div class="ctabprcci-chart zone-chart" id="zones"></div>

Answer 1

鉴于今天新的ZingChart版本（v2.6.0），我们已经推动了您的画布更改。感谢您的耐心，并成为ZingChart团队的一员。

Changelog here

demo here

Answer 2

杰夫在ZingChart团队这里。

似乎这个问题只发生在图表输出设置为＆＃39; canvas＆＃39;在render方法中。如果您将输出设置为＆＃39; svg＆＃39;解决了这个问题。我不确定这是否是你最近改变过的。似乎这在我们的旧版本中也会持续存在。

我们可以在内部放入一张票，以查看为什么用canvas进行此问题。

谢谢，

价值框背景消失了

2 个答案: