2

我的网站上的折线图有问题。一切都很好,除了无论我尝试什么,我都无法显示 crosshair-x 值/比例。 http://gyazo.com/42a34d0fed9c2912bf7ed40eb0c55144 两者都设置为“可见”:真。我的 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
                            }
                        }
                    };

有什么明显的我遗漏的东西可能会推翻那些被设置为可见的东西吗?

在此先感谢您的帮助!

4

1 回答 1

1

您使用的是哪个版本的 ZingChart?所有浏览器都会出现这种情况吗?您是否收到任何控制台错误?我已将您的代码放入我们的演示工具中,十字准线似乎可以工作。看看这里

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

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

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

我是 ZingChart 支持团队的一员,所以我很乐意提供帮助,但我无法最终重现该问题。

于 2015-07-09T16:34:15.497 回答