donglang6656
donglang6656
2014-02-04 13:44

数据阵列中的Highcharts类别

I'm trying to pull data from a mysql table and set it as the x-axis categories but I don't quite understand how.

Basically, I have Job numbers in a table, and I want to pull those and make them the categories on the x-axis, eventually when a column is clicked for a specific job, it'll drill down for more columns (which add up to the total percentage of the job number).

Here's an example of what I'm trying to do, it works with the column data when using an array there but not with the categories so it wouldn't work this way.

http://codepen.io/anon/pen/BoJqA

How would I go about doing this?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • douque8855 douque8855 7年前

    I'm not sure if the question is "how can i do this with php/mysql" or "how can i define column names in highcharts". i'll try to answer the latter. try this code to show custom column names instead of 1,2,3,...:

    $(function () { 
        var data = {"name":"Percentage","data":[50,28,150,125,34,75]};
        var categories = [5600, 5700,5800,5900,6000,6100];
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Job Budget Report'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: '% Budget hrs'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                 }]
            },
            series: [data]
        });
    });
    
    点赞 评论 复制链接分享
  • douou1872 douou1872 7年前

    'categories' is just a simple array. You would specify it as

    var categories = [5600, 5700,5800];
    

    And then in the chart:

    xAxis: {
      categories: categories
    }
    

    (or, of course, you could just populate them directly in the chart)

    However, as noted elsewhere, you have 3 categories and 6 data points, so your last 3 data points will have categories of '3', '4', and '5' as is.

    If the chart is supposed to be a grouped chart, you'll need to set your data up differently. If not, you'll need to supply more category titles.

    点赞 评论 复制链接分享
  • douhao2721 douhao2721 7年前

    It looks like you have more data than categories ? (You have 6 data points and 3 categories).

    However, I think you need to supply an array to the categories, but you are supplying an object. You can change your code to:

    $(function () { 
        var data = {"name":"Percentage","data":[50,28,150,125,34,75]};
        var categories = [5600, 5700,5800];
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Job Budget Report'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: '% Budget hrs'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                 }]
            },
            series: [data]
        });
    });
    
    点赞 评论 复制链接分享
  • dp5657087 dp5657087 7年前

    I've never used Highcharts but if it does not have an interface to directly access a database I think all you would need to do is pull the data from the mySQL query and put it in an array that would be used by Highcharts.

    Maybe something like:

    $mysqli = new mysqli("example.com", "user", "password", "database");
    if ($mysqli->connect_errno) {
        echo "Failed to connect to MySQL: " . $mysqli->connect_error;
    }
    
    $countsPerJob = array();
    $res = $mysqli->query( "SELECT jobNumber FROM JobTable" );
    while( ($row = $res->fetch_assoc()) ) {
        if( isset( $countsPerJob[$row['jobNumber'] ) ) {
            ++$countsPerJob[$row['jobNumber']];
        } else {
            $countsPerJob[$row['jobNumber']] = 1;
        }
    }
    

    Now $countsPerJob has all the information from the database table. You can then use the keys from $countsPerJob for the categories and the value for each entry in the array for the column height.

    点赞 评论 复制链接分享

为你推荐