HighChart 中的甘特图？

Question

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

@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' 如果我在相同的系列之上循环，如何使用 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
        },
        }

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

Answer 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)。

HighChart 中的甘特图？

Gantt Chart in HighChart?

javascript

highcharts

javascript-objects

gantt-chart