Question

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

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

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

我将如何做到这一点？

Answer 1

我不确定问题是“我怎么能用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]
    });
});

Answer 2

我从未使用过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中的键作为类别和每个键的值在数组中输入列高。

Answer 3

看起来你有比数据更多的数据？（您有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]
    });
});

Answer 4

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

var categories = [5600, 5700,5800];

然后在图表中：

xAxis: {
  categories: categories
}

（或者，当然，您可以直接在图表中填充它们）

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

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

数据阵列中的Highcharts类别

4 个答案: