数据阵列中的Highcharts类别

时间:2014-02-04 13:44:17

标签: javascript php mysql highcharts

我正在尝试从mysql表中提取数据并将其设置为x轴类别,但我不太明白如何。

基本上,我在表格中有作业编号,我想拉动它们并使它们成为x轴上的类别,最终当单击某个特定作业的列时,它会向下钻取更多列(这相当于工作号码的总百分比。)

以下是我正在尝试做的一个示例,它在使用数组时使用列数据但不使用类别,因此不会以这种方式工作。

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

我将如何做到这一点?

4 个答案:

答案 0 :(得分:2)

我不确定问题是“我怎么能用php / mysql做这个”或“如何在highcharts中定义列名”。我会试着回答后者。 尝试使用此代码显示自定义列名而不是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]
    });
});

答案 1 :(得分:1)

我从未使用过Highcharts,但是如果它没有直接访问数据库的接口,我认为您需要做的就是从mySQL查询中提取数据并将其放入Highcharts使用的数组中

可能是这样的:

$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;
    }
}

现在$countsPerJob拥有数据库表中的所有信息。 然后,您可以使用$countsPerJob中的键作为类别和每个键的值 在数组中输入列高。

答案 2 :(得分:1)

看起来你有比数据更多的数据? (您有6个数据点和3个类别。)

但是,我认为您需要为类别提供数组,但是您要提供一个对象。您可以将代码更改为:

$(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]
    });
});

答案 3 :(得分:1)

'categories'只是一个简单的数组。您可以将其指定为

var categories = [5600, 5700,5800];

然后在图表中:

xAxis: {
  categories: categories
}

(或者,当然,您可以直接在图表中填充它们)

但是,如其他地方所述,您有3个类别和6个数据点,因此您的最后3个数据点将按原样分类为“3”,“4”和“5”。

如果图表应该是分组图表,则需要以不同方式设置数据。 如果没有,您将需要提供更多类别标题。