2

サイトの折れ線グラフに問題があります。何を試しても、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
                            }
                        }
                    };

目に見えるように設定されているものを無効にする可能性のある、私が見逃している明らかなものはありますか?

よろしくお願いします。

4

1 に答える 1

1

どのバージョンの ZingChart を使用していますか? これはすべてのブラウザで発生しますか? コンソール エラーが発生していますか? あなたのコードをデモ ツールに入れてみましたが、クロスヘアが機能しているようです。ここを見てください

<head>アプリケーションの要素に次を追加してみてください。

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

これにより、ZingChart はその CSS をその要素に強制的に挿入し、時々発生する可能性のある特定の種類の競合を防ぎますが、これが問題であるかどうかは 100% 確信が持てません。

私は ZingChart サポート チームに所属しているので、喜んでお手伝いしたいのですが、こちらの問題を再現できません。

于 2015-07-09T16:34:15.497 に答える