Javascript 将此highcharts转换为我的数据

我想复制这个highcharts柱形图：

我从一张表中提取数据，结果是这样的

我想要在x轴上的工作数量，在x轴上，品牌在小提琴中，预算的百分比将是品牌数据。现在，当您单击一个职务编号时，它会深入到各个部门，并显示它们占预算工时的百分比

我已经完成了第一部分的工作，但我使用了不同的代码，如下所示：

以下是我在代码中更改的内容：

  $sql = "SELECT * FROM view_percentof_budgeted WHERE PercentofBudgetedHrs < 1000 && PercentofBudgetedHrs IS NOT NULL";
$result = mysqli_query($dbc3, $sql);
while($row = mysqli_fetch_assoc($result)) {
    $jobNum[] = $row['Job_Num'];
    $jobData[$row['Job_Num']] = $row['PercentofBudgetedHrs'];
    $jobDrillData[$row['Job_Num']][] = $row;
}

$sql=“从预算百分比视图中选择*，其中预算百分比<1000和预算百分比不为空”；
$result=mysqli\u查询（$dbc3，$sql）；
while（$row=mysqli\u fetch\u assoc（$result））{
$jobNum[]=$row['Job_Num']；
$jobData[$row['Job_Num']]=$row['PercentofBudgetedHrs']；
$jobDrillData[$row['Job_Num']][]=$row；
}

我在JS中更改的部分：

     var colors = Highcharts.getOptions().colors,
      categories = [<?php echo join($jobNum, ',') ?>],
      name = '% of budgeted hours',
      level = 0,
      data = [
             <?php echo join($jobData, ',') ?>,
             ];

   function setChart(name, categories, data, color, level) {
      chart.xAxis[0].setCategories(categories);
      chart.series[0].remove();


      chart.addSeries({
         name: name,
         data: data,
         level: level,
         color: color || 'red'
      });
   }

var colors=Highcharts.getOptions（）.colors，
类别=[]，
名称=%的预算小时数'，
级别=0，
数据=[
,
];
功能设置图（名称、类别、数据、颜色、级别）{
chart.xAxis[0].setCategories（categories）；
chart.series[0]。删除（）；
chart.addSeries({
姓名:姓名,，
数据：数据，
级别:级别,，
颜色：颜色| |“红色”
});
}

---

我怎样才能像我贴的第一把小提琴那样演奏呢？我喜欢从表中提取数据的方法，所以我不想使用tsv，我只是对深入部分感到困惑。我看了一些例子，但似乎没有弄明白。

我建议使用join（）在php中准备正确的数组结构，然后使用json\u encode（）包括json\u NUMERIC\u CHECK标志。因此，您可以通过$.getJSON获得此json并将其放入highcharts中。

好的，我知道如何执行此操作，但您能否就如何在示例中使用它给我一些提示？我们可以聊天吗？我指给你看，你需要什么，我的意思是用php准备json的结构，通过数组和变量来实现正确的结构。我明白，但接下来的步骤是什么？这是我的json输出。[{“name”：“Job_Num”，“data”：[566656675668566956745675]}和{“name”：“PercentofBudgetedHrs”，“data”：[94,99111129145125]}，我如何使用它？