我有一个多系列(时间)折线图。我在单个系列上定义了十字线-x绘图区域指南标签。如果一个系列具有多个数据元素(点),则该系列中所有点的绘图区域指南标签显示正常。如果一个系列只有一个点,特定系列无法显示绘图区域指南标签。我使用的是最新的Chrome浏览器(63.0.3239.132)
我在错误图表中包含了下面的配置,但是在codepen上也设置了2个示例。
示例中没有显示1点系列的指南标签 https://codepen.io/iklotzko/pen/QQqEmp
显示两个系列的指南标签的示例 https://codepen.io/iklotzko/pen/bLoeqp
上述示例之间的唯一区别是错误示例中的S2只有1分。
错误示例的配置 系列1(S1)有2个点,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"
};
答案 0 :(得分:0)
我通过电子邮件发送了ZingChart,他们证实这是2.6.3中的一个错误,他们修复了这个错误并将在下一个版本中提供,大概是2.6.4或2.7.0