На Zingchart не отображаются метки-указатели области перекрестия для серии с одной точкой

У меня есть график с несколькими рядами (временем). Я определяю метки-указатели перекрестия-x на отдельных сериях. Если в серии имеется более одного элемента данных (точки), метки направляющих области графика для всех точек в этой серии отображаются нормально. Если у серии есть только одна точка, то конкретная серия не отображает метки направляющих области графика. Я использую последний браузер Chrome (63.0.3239.132)

Я включил конфигурацию ниже для ошибочной диаграммы, но также настроил 2 примера на codepen.

Пример с метками-ориентирами, не отображаемыми для серии из 1 точки https://codepen.io/iklotzko/pen/QQqEmp

Пример с направляющими метками для обеих двухточечных серий https://codepen.io/iklotzko/pen/bLoeqp

Единственная разница между приведенными выше примерами состоит в том, что S2 в ошибочном примере имеет всего 1 балл.

Конфигурация для ошибочного примера Series 1 (S1) имеет 2 балла, Series 2 (S2) имеет 1 балл. Направляющие метки для S2 не отображаются в области графика.

var myConfig = 
    {
        "type":"line",
        "legend":{
            "layout":"1x5",
            "shadow":false,
            "adjustLayout":true,
            "margin-bottom":"17px",
            "margin-top":"0",
            "padding":"0",
            "align":"center",
            "background-color":"none",
            "vertical-align":"bottom",
            "border-top":"0 none",
            "border-right":"0 none",
            "border-bottom":"0 none",
            "border-left":"0 none"
        },
        "labels":{
            "visible":false
        },
        "marker":{
            "border-width":0,
            "border-color":"none",
            "shadow":false
        },
        "plot":{
            "line-width":1
        },
        "title":{
            "adjustLayout":true,
            "text":"S2-2pts, S2-pt",
            "font-size":12,
            "margin-top":2,
            "padding":0,
            "height":"10px",
            "bold":true,
            "border":"0 none",
            "font-color":"#333",
            "background-color":"white"
        },
        "subtitle":{
            "text":"subtitle",
            "color":"#444",
            "font-style":"italic",
            "font-size":12,
            "margin":0,
            "offset-y":-17,
            "padding":0,
            "height":"18px",
            "bold":false
        },
        "plotarea":{
            "margin":"dynamic 50 dynamic dynamic",
            "adjust-layout":true
        },
        "scaleX":{
            "items-overlap":true,
            "values":[1516942800000,1519362000000,1522382400000],
            "transform":{
                "type":"date",
                "all":"%d-%M-%Y",
                "item":{
                    "visible":false
                }
            },
            "item":{
                "angle":-45,
                "font-size":10
            }
        },
        "scaleY":{
            "guide":{
                "lineStyle":"solid"
            },
            "format":"$%v",
            "thousands-separator":",",
            "label":{
                "text":"Amount"
            }
        },
        "tooltip":{
            "visible":false
        },
        "crosshairX":{
            "lineColor":"#000",
            "plotLabel":{
                "exact":false,
                "multiple":true,
                "font-color":"white",
                "border-radius":"5px",
                "text":"%t: $%v<br />%data-custom (%k)",
                "thousands-separator":",",
                "decimals":2
            },
            "scaleLabel":{
                "borderRadius":2,
                "format":"$%v",
                "thousands-separator":",",
                "decimals":2
            },
            "marker":{
                "size":5,
                "type":"circle",
                "backgroundColor":"transparent",
                "border-color":"#888",
                "border-width":"6px",
                "border-alpha":0.4
            }
        },
        "series":[
            {
                "values":[[1517893200000,19480], [1522382400000, 30000]],
                "data-custom":["first-point", "second-point"],
                "text":"S1",
                "marker":{
                    "type":"star5",
                    "background-color":"blue",
                    "border-width":0,
                    "border-color":"none",
                    "size":6,
                    "shadow":false
                },
                "legend-marker":{
                    "type":"star5",
                    "backgroundColor":"blue",
                    "shadow":false,
                    "show-line":true,
                    "size":4,
                    "border-width":0,
                    "border-color":"none"
                },
                "guide-label":{
                    "background-color":"blue",
                    "border-color":"blue"
                },
                "lineColor":"blue"
            },
            {
                "values":[],
                "data-custom":[],
                "text":"Empty Series",
                "marker":{
                    "type":"diamond",
                    "background-color":"black",
                    "border-width":0,
                    "border-color":"none",
                    "size":6,
                    "shadow":false
                },
                "legend-marker":{
                    "type":"diamond",
                    "backgroundColor":"black",
                    "shadow":false,
                    "show-line":true,
                    "size":4,
                    "border-width":0,
                    "border-color":"none"
                },
                "guide-label":{
                    "background-color":"black",
                    "border-color":"black"
                },
                "lineColor":"black"
            },
            {
                "values":[],
                "data-custom":[],
                "text":"Empty-Series",
                "marker":{
                    "type":"square",
                    "background-color":"brown",
                    "border-width":0,
                    "border-color":"none",
                    "size":6,
                    "shadow":false
                },
                "legend-marker":{
                    "type":"square",
                    "backgroundColor":"brown",
                    "shadow":false,
                    "show-line":true,
                    "size":4,
                    "border-width":0,
                    "border-color":"none"
                },
                "guide-label":{
                    "background-color":"brown",
                    "border-color":"brown"
                },
                "lineColor":"brown"
            },
            {
                "values":[],
                "data-custom":[],
                "text":"Empty-Series",
                "marker":{
                    "type":"triangle",
                    "background-color":"green",
                    "border-width":0,
                    "border-color":"none",
                    "size":6,
                    "shadow":false
                },
                "legend-marker":{
                    "type":"triangle",
                    "backgroundColor":"green",
                    "shadow":false,
                    "show-line":true,
                    "size":4,
                    "border-width":0,
                    "border-color":"none"
                },
                "guide-label":{
                    "background-color":"green",
                    "border-color":"green"
                },
                "lineColor":"green"
            },
            {
                "values":[[1517893200000,0]],
                "data-custom":["first-point"],
                "text":"S2",
                "marker":{
                    "type":"circle",
                    "background-color":"red",
                    "border-width":0,
                    "border-color":"none",
                    "size":6,
                    "shadow":false
                },
                "legend-marker":{
                    "type":"circle",
                    "backgroundColor":"red",
                    "shadow":false,
                    "show-line":true,
                    "size":4,
                    "border-width":0,
                    "border-color":"none"
                },
                "guide-label":{
                    "background-color":"red",
                    "border-color":"red"
                },
                "lineColor":"red"
            }
        ],
        "id":"myChart"
    };

1 ответ

Я написал ZingChart по электронной почте, и они подтвердили, что это ошибка в 2.6.3, они исправили ошибку и сделают ее доступной в следующем выпуске, предположительно 2.6.4 или 2.7.0

Другие вопросы по тегам