我的网站上有一个折线图的问题。一切都很好,除了无论我怎么尝试,我不能得到十字准星x值/比例显示。http://gyazo.com/42a34d0fed9c2912bf7ed40eb0c55144两者都设置为"可见":true。我的JSON代码如下:
var myChart = {
"type": "line",
"background-color": "transparent",
"utc": true,
"title": {
"y": "0px",
"text": '@myClasses.STARTDATETIME.ToString("MM/d/yyyy (h:mm tt)")',
"background-color": "transparent",
"font-size": "16px",
"font-color": "#666",
"font-weight": "bold",
"letter-spacing": "0.1225em",
"height": "25px"
},
"plotarea": {
"margin":"10% 8% 14% 12%",
"background-color":"#666"
},
"legend": {
"visible": false,
},
"scale-x": {
"min-value": myEpoch,
"shadow": 0,
"step": @ViewBag.TotalTime,
"line-color": "#fff",
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"line-color": "#f6f7f8",
"visible": true
},
"item": {
"font-color": "#666"
},
"transform": {
"type": "date",
"all": "%D,%d %M<br />%h:%i %A",
"item": {
"visible": false
}
},
"label": {
"visible": false,
"font-color": "#666"
},
"minor-ticks": 0
},
"scale-y": {
"values": "25:200:25",
"line-color": "#fff",
"shadow": 0,
"tick": {
"line-color": "#f6f7f8"
},
"guide": {
"visible": false
},
"item": {
"font-color": "#666"
},
"label": {
"text": "Heart Rate (BPM)",
"font-color": "#666"
},
"minor-ticks": 0,
"thousands-separator": ",",
"markers": [
{
"type": "area",
"range": [25, 60],
"backgroundColor": "#585857",
"alpha": 1
},
{
"type": "area",
"range": [60, 95],
"backgroundColor": "#6FCBDC",
"alpha": 1
},
{
"type": "area",
"range": [95, 130],
"backgroundColor": "#8BC540",
"alpha": 1
},
{
"type": "area",
"range": [130, 165],
"backgroundColor": "#F38220",
"alpha": 1
},
{
"type": "area",
"range": [165, 200],
"backgroundColor": "#EB2026",
"alpha": 1
}
]
},
"tooltip": {
"font-color": "#666",
"visible": false
},
"chart": {
"marginRight": 30,
"marginLeft": 70
},
"plot": {
"tooltip-text": "%t bpm: %v",
"shadow": 0,
"line-width": "3px",
"marker": {
"type": "circle",
"size": 2
},
"hover-marker": {
"type": "circle",
"size": 4,
"border-width": "1px"
}
},
"series": [
{
"values": [88,96,93,88,88,86,89,120,144,153,156,132,113,145,138,152,135,155,164,165,147,143,152,140,153,138,116,125,131,132,134,124,111,136,167,171,165,168,139,129,138,130,140,141],
"text": "",
"line-color": "#ffffff",
"marker": {
"background-color": "#ffffff",
"border-width": 1,
"shadow": 0,
"border-color": "#ffffff",
"visible": true
},
"palette": 0
}
],
"crosshair-x": {
"line-color": "#f6f7f8",
"value-label": {
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"font-weight": "bold",
"font-color": "#fff",
"background-color": "#666",
"visible": true
},
"scale-label": {
"font-color": "#fff",
"background-color": "#666",
"border-radius": "5px",
"border-width": "1px",
"border-color": "#f6f7f8",
"padding": "0px 10px 0px 5px",
"visible": true
}
}
};
是否有什么明显的我错过了,可能会推翻那些被设置为可见的?
提前感谢您的帮助!
您使用的是哪个版本的ZingChart ?所有浏览器都会出现这种情况吗?您是否得到任何控制台错误?我已经将您的代码放入我们的演示工具中,十字准星似乎可以工作。请看这里。
您可以尝试将以下内容添加到应用程序的<head>
元素中:
<style title="zingchart"></style>
这迫使ZingChart将其CSS注入到该元素中,以防止不时发生的某些类型的冲突,但我不能100%确定这是问题所在。
我是ZingChart支持团队的,所以我很想帮忙,但是我这边无法重现这个问题。