你如何创建highcharts条形图

时间:2013-09-04 15:39:30

标签: javascript highcharts

我正在尝试使用highcharts构建条形图。这是我的功能:

function monthly_web_login() {

        $.getJSON('monthly_web_login.php', function(data) {

        var chart = new highcharts({
         chart: {
                borderColor: '#98AFC7',
                borderRadius: 20,
                borderWidth: 1,
                renderTo: 'login',
                type: 'bar',
                marginRight: 10,

            },

            exporting: {
            enabled: true
        },
            rangeSelector: {
                enabled:false              
            },

            scrollbar: {
                    enabled: false
                    },
            navigator : {
                enabled : false
            },
            xAxis: {
            type: 'datetime',
            tickInterval: 30 * 24 * 3600 * 1000, // 6 months month
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b',
                year: '%Y'
            }
        },
            yAxis: { // Primary yAxis
                labels: {
                    style: {
                        color: 'blue'
                    }
                },
                gridLineColor: '#197F07',
                gridLineWidth: 0,
                title: {
                    text: 'Monthly Logons',
                    style: {
                        color: 'blue'
                    }
                }
            },

            credits: {
                enabled: false
            },

            title: {
                text: 'TOTAL MONTHLY LOGONS',
                style: {
                    color: '#333000',
                    fontSize: '14px'
                }
            },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b><br>',
                valueDecimals: 2
            },
            series: data


    });
    });
}

这是我的json文件:

[{"name":"logon","pointStart":Date.UTC(2011, 1, 1),"pointInterval":30 * 24 * 3600 * 1000,"data":[284697404,268944957,297847827,287150001,277779620,262275285]}]

这是html:

<div id="login" style="width:700px; height:300px;"></div>

我也没有看到任何错误,也没有图表。任何想法,我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

您似乎没有将图表与DOM元素相关联。

而不是:

var chart = new highcharts({})...

尝试:

var chart = $('#login').highcharts({})...

请参阅此jsfiddle(http://jsfiddle.net/pSTcC/)以获取使用您的代码并进行微小修改的工作示例。