Crosshair-x不会显示在折线图上

时间:2015-07-08 17:16:43

标签: zingchart

我的网站上有折线图问题。一切都运行良好,除了我尝试的东西,我不能得到crosshair-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
                            }
                        }
                    };

有什么显而易见的我错过了可能会推翻那些被设置为可见的东西吗?

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

您使用的是哪个版本的ZingChart?这是否会在所有浏览器中出现?你收到任何控制台错误吗?我已经将您的代码放入我们的演示工具中,并且十字准线似乎有效。 Take a look here

您可以尝试将以下内容添加到应用程序的<head>元素中:

<style title="zingchart"></style> 

这迫使ZingChart将其CSS注入该元素,防止可能不时发生的某些类型的冲突,但我不能100%确定这是问题所在。

我在ZingChart支持团队中,所以我很乐意提供帮助,但我无法在我的最终重现这个问题。