使用zingchart:图表上的工具提示不起作用

时间:2017-07-05 03:59:42

标签: zingchart

我正在使用Zingchart API做泡泡图。我复制了代码,但改变了一些代码以满足我的特定需求。一切都按预期工作,但不是工具提示。以下是代码:

<body>
    <div id='myChart' align="center"></div>
    <script>
        zingchart.THEME="classic";
            var myConfig = {
                "type": "bubble",
                "background-color": "#f4f4f4 transparent",
                "title": {
                    "text": "GRAF BIDANG KEPAKARAN",
                    "background-color": "transparent",
                    "border-bottom": "transparent",
                    "height": "20px",
                    "font-color": "red",
                    "font-family": "Arial",
                    "font-weight": "normal",
                    "font-size": "18px"
                },
                "plotarea": {
                    "background-color": "#fff",
                    "alpha": 0.3,
                    "margin": "90px 40px 50px 50px"
                },
                "scale-y": {
                    "values": "0:20:5",
                    "line-color": "transparent",
                    "shadow": 0,
                    "tick": {
                        "line-color": "transparent"
                    },
                    "minor-ticks": 0,
                    "minor-tick": {
                        "visible": false,
                        "line-color": "transparent",
                        "shadow": 0
                    },
                    "guide": {
                        "line-color": "transparent",
                        "alpha": 0,
                        "line-style": "solid"
                    },
                    "minor-guide": {
                        "line-color": "transparent",
                        "alpha": 0,
                        "line-style": "transparent"
                    },
                    "item": {
                        "padding-right": "0px",
                        "font-family": "Arial",
                        "font-size": "0px",
                        "font-color": "transparent"
                    }
                },
                "scale-x": {
                    "line-color": "transparent",
                    "shadow": 0,
                    "tick": {
                        "line-color": "transparent"
                    },
                    "minor-ticks": 1,
                    "minor-tick": {
                        "visible": false,
                        "line-color": "transparent",
                        "shadow": 0
                    },
                    "guide": {
                        "line-color": "transparent",
                        "alpha": 0,
                        "line-style": "solid"
                    },
                    "minor-guide": {
                        "line-color": "transparent",
                        "alpha": 0,
                        "line-style": "transparent"
                    },
                    "item": {
                        "padding-top": "0px",
                        "font-family": "Arial",
                        "font-size": "0px",
                        "font-color": "transparent"
                    }
                },

                "tooltip":{
                      "text":"Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2",
                      "text-align":"left"
                    },

                "series": [
                    {
                        "values": [
                            [
                                1,
                                15,
                                8
                            ],
                            [
                                2,
                                4,
                                2
                            ],
                            [
                                5,
                                10,
                                1
                            ],
                            [
                                6,
                                3,
                                3
                            ],
                            [
                                3,
                                6,
                                2
                            ],
                            [
                                7,
                                15,
                                1
                            ],
                            [
                                8,
                                2,
                                4
                            ],
                            [
                                1,
                                6,
                                6
                            ],
                            [
                                2,
                                12,
                                3
                            ],
                            [
                                4,
                                4,
                                4
                            ],
                            [
                                5,
                                1,
                                5
                            ],
                            [
                                6,
                                0,
                                1
                            ],
                            [
                                8,
                                16,
                                2
                            ]
                        ],
                        "marker": {
                            "background-color": "#b2bf77 #829550",
                            "border-width": "3px",
                            "border-color": "#728440",
                            "fill-type": "linear",
                            "shadow": true,

                        },
                        "hover-marker": {
                            "background-color": "#d2d9af #b2bf77",
                            "border-color": "#a1ae64",
                            "border-width": "2px"
                        },
                    },
                    {
                        "values": [
                            [
                                3,
                                5,
                                1
                            ],
                            [
                                2,
                                17,
                                2
                            ],
                            [
                                8,
                                8,
                                3
                            ],
                            [
                                4,
                                6,
                                2
                            ],
                            [
                                7,
                                3,
                                5
                            ],
                            [
                                2,
                                12,
                                1
                            ],
                            [
                                1,
                                0,
                                3
                            ],
                            [
                                6,
                                2,
                                2
                            ],
                            [
                                4,
                                12,
                                7
                            ],
                            [
                                6,
                                14,
                                2
                            ],
                            [
                                2,
                                6,
                                2
                            ]
                        ],
                        "marker": {
                            "background-color": "#9d9ad1 #615faa",
                            "border-width": "3px",
                            "border-color": "#514f99",
                            "fill-type": "linear",
                            "shadow": true,

                        },
                        "hover-marker": {
                            "background-color": "#c3c2e3 #9d9ad1",
                            "border-color": "#8a87c2",
                            "border-width": "2px"
                        }
                    },
                    {
                        "values": [
                            [
                                3,
                                6,
                                5
                            ],
                            [
                                6,
                                8,
                                8
                            ],
                            [
                                8,
                                12,
                                5
                            ],
                            [
                                3,
                                2,
                                3
                            ],
                            [
                                5,
                                5,
                                2
                            ],
                            [
                                7,
                                10,
                                2
                            ],
                            [
                                2,
                                1,
                                1
                            ],
                            [
                                7,
                                4,
                                1
                            ],
                            [
                                6,
                                17,
                                4
                            ],
                            [
                                1,
                                9,
                                3
                            ],
                            [
                                5,
                                14,
                                1
                            ]
                        ],
                        "marker": {
                            "background-color": "#ecd466 #e0b140",
                            "border-width": "3px",
                            "border-color": "#cb9f34",
                            "fill-type": "linear",
                            "shadow": true,
                        },
                        "hover-marker": {
                            "background-color": "transparent",
                            "border-color": "#d5bc4c",
                            "border-width": "2px"
                        }
                    }
                ]
            };
            zingchart.render({ 
            id : 'myChart', 
            data : myConfig, 
            height: "500", 
            width: "725"
        });
    </script>
</body>

任何人都可以帮我解决这个问题吗? (参考:https://codepen.io/anon/pen/ZyReZX

0 个答案:

没有答案