HighCharts中的甘特图？答案

【问题标题】：Gantt Chart in HighChart?HighCharts中的甘特图？
【发布时间】：2021-08-03 08:18:39
【问题描述】：

我在我的应用程序中使用了一个高位图表（甘特图），下面是代码

@extends('layouts.admin')

@section('content')
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>
<div class="card-body">
<div class="tab-content" id="project-tabContent">
    <div id="container"></div>
</div>
</div>
<script type="text/javascript">
  var activities = {!! json_encode($activities->toArray()) !!};
  Highcharts.ganttChart('container', {
title: {
    text: activities[0].project_id
},

xAxis: {
    tickPixelInterval: 70
},

 yAxis: {
    type: 'category',
    grid: {
        enabled: true,
        borderColor: 'rgba(0,0,0,0.3)',
        borderWidth: 1,
        columns: [{
            title: {
                text: 'Title'
            },
            labels: {
                format: '{point.title}'
            }
        }, {
            title: {
                text: 'Budget'
            },
            labels: {
                format: '{point.budget}'
            }
        },
         {
            title: {
                text: 'Target'
            },
            labels: {
                format: '{point.target}'
            }
        }]
    }
},


series: [{
    data: [

    {
        title: activities[0].title,
        budget: activities[0].budget,
        target: activities[0].total_target,
        start:Date.UTC(2017, 10, 23),
        end: Date.UTC(2018, 10, 23),
         y: 0
    },
    
    ]
}],

现在我喜欢循环数据，它显示错误 Uncaught SyntaxError: Unexpected token 'for' if i loop above the series same ，如何使用 highcharts 在甘特聊天中循环我的活动数组

      series: [{
        data: [
for(var x=0;x<activities.length;x++)
        {
            title: activities[x].title,
            budget: activities[x].budget,
            target: activities[x].total_target,
            start:Date.UTC(2017, 10, 23),
            end: Date.UTC(2018, 10, 23),
             y: x
        },
        }

或者你可以建议我另一种使用循环的方法，谢谢

【问题讨论】：

标签： javascript highcharts javascript-objects gantt-chart

【解决方案1】：

数据是系列点数组的位置。不是可以写JS代码的地方。

您可以将数据传递到图表上方，例如：https://jsfiddle.net/BlackLabel/L2b7zo05/

let data = [{}]

for (let x = 0; x < activities.length; x++) {
 data.push({
  name: activities[x].title,
  budget: activities[x].budget,
  target: activities[x].total_target,
  start: activities[x].start,
  end: activities[x].end
 })
};

Highcharts.ganttChart('container', {
 xAxis: {
  min: Date.UTC(2014, 10, 17),
  max: Date.UTC(2014, 10, 30),
  gridLineWidth: 1
 },

series: [{
 data: data
 }]
});

今后请不要在多个支持渠道 (https://www.highcharts.com/forum/viewtopic.php?f=19&p=169191#p169191) 上重复相同的主题。

【讨论】：