Значения поля фона исчезли

У меня есть смешанный график с полями значений с размещением сверху. На всех, кроме первого значения, цвет фона исчез из поля значения. Ранее это работало нормально, поскольку белый фон обнаруживался за всеми полями значений, и в коде не было никаких изменений, поэтому я не понимаю, почему цвет фона внезапно исчез. Ниже мой код, показывающий проблему. Любая помощь или направление, как это исправить, будет принята с благодарностью.

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>

Источник

2 ответа

Решение

Джефф в команде ZingChart здесь.

Похоже, что эта проблема возникает, только если в методе рендеринга для выходных данных диаграммы установлено значение "холст". Если вы установите выходное значение 'svg', это решит проблему. Я не уверен, что это то, что вы недавно изменили или нет. Похоже, что это сохраняется и в наших старых сборках.

Мы можем вставить внутренний билет, чтобы проверить, почему эта проблема возникает с canvas.

Спасибо,

Источник

В свете новой версии ZingChart (v2.6.0) сегодня мы заставили вас изменить холст. Спасибо за ваше терпение и за участие в команде ZingChart.

Список изменений здесь

демо здесь

Источник
Другие вопросы по тегам