Highcharts，Highstock，换行到区域bug

时间：2018-01-22 02:54:54

标签： highcharts highstock

这条线有时会变成区域，但我不知道如何处理这个问题。 enter image description here

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
    <script src="https://cdn.bootcss.com/highstock/4.2.5/highstock.src.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var options = {  
        "chart":{  
            "type": "line",
            "height":500,
            // "backgroundColor":"transparent",
            // "spacingBottom":0,
            // "spacingRight":1,
            // "alignTicks":false,
            "events":{  

            }
        },
        "rangeSelector":{  
            // "enabled":false
        },
        "credits":{  
            "enabled":false
        },
        "title":{  
            "text":null
        },
        "xAxis":{  
            // "labels":{  

            // },
            "min":1514995200000,
            "max":1516204800000,
            // "gridLineColor":"#E9E9E9",
            // "gridLineWidth":1,
            // "tickWidth":0,
            // "minTickInterval":86400000
        },
        "yAxis":[  
            {  
                "title":"",
                "min":0,
                "labels":{  
                    // "useHTML":true,
                    "style":{  
                    "color":"#2cbfbe"
                    }
                },
                "gridLineColor":"#E9E9E9",
                "gridLineWidth":1,
                "opposite":false
            },
            {  
                "title":"",
                "min":0,
                "labels":{  
                    // "useHTML":true
                },
                "gridLineWidth":0,
                "opposite":true
            }
        ],
        "legend":{  
            // "enabled":true,
            // "verticalAlign":"top",
            // "align":"left",
            // "x":40,
            // "y":-10,
            // "floating":true,
            // "borderWidth":0,
            // "itemStyle":{  
            //     "fontFamily":"Arial,微软雅黑",
            //     "fontColor":"#6e7384",
            //     "fontWeight":"normal"
            // }
        },
        "plotOptions":{  
            "series":{  
                "lineWidth":2,
                // "marker":{  
                //     "enabled":false,
                //     "radius":1.5,
                //     "symbol":"circle",
                //     "states":{  
                //     "hover":{  
                //         "halo":{  
                //             "size":8,
                //             "opacity":0.25
                //         }
                //     }
                //     }
                // },
                // "animation":{  
                //     "duration":1500
                // },
                // "events":{  

                // }
            },
            // "area":{  
            //     "fillOpacity":0.5,
            //     "lineWidth":0
            // },
            // "column":{  
            //     "states":{  
            //         "hover":{  
            //         "color":"#eee"
            //         }
            //     }
            // }
        },
        "tooltip":{  
            // "borderColor":"#666",
            // "borderWidth":0,
            // "borderRadius":2,
            // "backgroundColor":"rgba(255, 255, 255, 0.8)",
            // "useHTML":true,
            // "shadow":false,
            // "crosshairs":{  
            //     "color":"#7ac943",
            //     "dashStyle":"shortdot",
            //     "width":1
            // },
            // "shared":true,
            // "style":{  
            //     "padding":"0"
            // }
        },
        "exporting":{  
            "enabled":false
        },
        "navigator":{  
            "height":80,
            "margin":60,
            // "xAxis":{  
            //     "type":"datetime",
            //     "opposite":true,
            //     "labels":{  
            //         "opposite":true
            //     }
            // },
            // "outlineWidth":0
        },
        "scrollbar":{  
            // "barBackgroundColor":"#82cdcb",
            // "barBorderWidth":0,
            // "barBorderRadius":5,
            // "buttonBackgroundColor":"#82cdcb",
            // "buttonBorderWidth":0,
            // "buttonArrowColor":"#fff",
            // "buttonBorderRadius":2,
            // "rifleColor":"#82cdcb",
            // "trackBackgroundColor":"#d3dcdc",
            // "trackBorderWidth":0,
            // "trackBorderColor":"#d3dcdc",
            // "trackBorderRadius":3,
            // "height":10
        },
        "series":[  
            {  
                "name":"人口",
                "data":[  
                    {  
                    "x":1514995200000,
                    "y":181864
                    },
                    {  
                    "x":1515081600000,
                    "y":121360
                    },
                    {  
                    "x":1515168000000,
                    "y":116758
                    },
                    {  
                    "x":1515254400000,
                    "y":249596
                    },
                    {  
                    "x":1515340800000,
                    "y":1891802.3
                    },
                    {  
                    "x":1515427200000,
                    "y":4175895.4
                    },
                    {  
                    "x":1515513600000,
                    "y":4172570.7
                    },
                    {  
                    "x":1515600000000,
                    "y":5520244
                    },
                    {  
                    "x":1515686400000,
                    "y":4449323.3
                    },
                    {  
                    "x":1515772800000,
                    "y":3544046.6
                    },
                    {  
                    "x":1515859200000,
                    "y":3713686.6
                    },
                    {  
                    "x":1515945600000,
                    "y":3655995.1
                    },
                    {  
                    "x":1516032000000,
                    "y":4828718.9
                    },
                    {  
                    "x":1516118400000,
                    "y":4563104
                    },
                    {  
                    "x":1516204800000,
                    "y":4660163
                    }
                ],
                "yAxis":0
            },
            {  
                "name":"GDP",
                "data":[  
                    {  
                    "x":1514995200000,
                    "y":4142
                    },
                    {  
                    "x":1515081600000,
                    "y":2519
                    },
                    {  
                    "x":1515168000000,
                    "y":1773
                    },
                    {  
                    "x":1515254400000,
                    "y":6396
                    },
                    {  
                    "x":1515340800000,
                    "y":18486
                    },
                    {  
                    "x":1515427200000,
                    "y":12680
                    },
                    {  
                    "x":1515513600000,
                    "y":11155
                    },
                    {  
                    "x":1515600000000,
                    "y":13043
                    },
                    {  
                    "x":1515686400000,
                    "y":12274
                    },
                    {  
                    "x":1515772800000,
                    "y":11034
                    },
                    {  
                    "x":1515859200000,
                    "y":12303
                    },
                    {  
                    "x":1515945600000,
                    "y":11717
                    },
                    {  
                    "x":1516032000000,
                    "y":13913
                    },
                    {  
                    "x":1516118400000,
                    "y":14214
                    },
                    {  
                    "x":1516204800000,
                    "y":16528
                    }
                ],
                "yAxis":1
            }
        ]
        };
    $('#container').highcharts('StockChart', options)
</script>

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题