Javascript 数据数组中的Highcharts类别

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

基本上，我在一个表中有作业编号，我想把它们拉出来，并使它们成为x轴上的类别，最终，当为特定作业单击一列时，它将向下钻取更多列（这加起来占作业编号的总百分比）

下面是我尝试做的一个例子，当使用数组时，它可以处理列数据，但不能处理类别，所以它不会以这种方式工作

---

我该怎么做呢？

我从未使用过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

中的键用于类别和每个类别的值

---

在数组中输入列高度。

我从未使用过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

中的键用于类别和每个类别的值

---

在数组中输入列高度。

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

---

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

---

我不确定问题是“如何使用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]
    });
});

---

我不确定问题是“如何使用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]
    });
});

---

“类别”只是一个简单的数组。您可以将其指定为

var categories = [5600, 5700,5800];

然后在图表中：

xAxis: {
  categories: categories
}

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

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

如果该图表应为分组图表，则需要对数据进行不同的设置。

---

如果没有，您将需要提供更多的类别标题。

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

var categories = [5600, 5700,5800];

然后在图表中：

xAxis: {
  categories: categories
}

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

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

如果该图表应为分组图表，则需要对数据进行不同的设置。

---

如果没有，您将需要提供更多的类别标题。

好吧，两者都有，我有一个向下钻取的highcharts列图。由于everyones的帮助（让我更好地理解），我通过查询获得了要显示的工作编号，并在最初的列中显示出来。然而，第二级向下钻取给我带来了一些麻烦。你能帮我做这件事吗？这里是提琴：提琴似乎工作得很好，当我点击栏的细节栏即将出现。有什么问题吗？没问题。但正如您所看到的，数据是硬编码的，所以我想知道您是否知道一个好的解决方案，可以从我的表中为每个工作提取数据。让我们以表面处理为例，当我为此提取数据时，无论单击哪个作业，都会发布每个表面处理小时数。也许我应该提出一个新问题。另一个问题会更好。别忘了在问题中加入你的数据库方案，这样人们就可以用你自己的结构来回答。如果你想看一看，这是我的新问题。两者都有，我有一个向下钻取的highcharts柱形图。由于everyones的帮助（让我更好地理解），我通过查询获得了要显示的工作编号，并在最初的列中显示出来。然而，第二级向下钻取给我带来了一些麻烦。你能帮我做这件事吗？这里是提琴：提琴似乎工作得很好，当我点击栏的细节栏即将出现。有什么问题吗？没问题。但正如您所看到的，数据是硬编码的，所以我想知道您是否知道一个好的解决方案，可以从我的表中为每个工作提取数据。让我们以表面处理为例，当我为此提取数据时，无论单击哪个作业，都会发布每个表面处理小时数。也许我应该提出一个新问题。另一个问题会更好。别忘了在问题中加入你的数据库方案，这样人们可以用你自己的结构来回答。如果你想看一看，这里是我的新问题。