Highchart Gantt数据填充问题：标记、名称及里程碑配置

问题1：将details转换为里程碑（scatter系列） #

先创建格式与标记样式的映射表，匹配details中不同format对应的符号、颜色，再遍历数据源生成scatter所需的数据结构：

修改后的document ready代码 #

$(document).ready(function () {
    var incomingdata = @Html.Raw(Newtonsoft.Json.JsonConvert.DeserializeObject(ViewData["dataView"].ToString()));
    var SeriesDataArray = [];
    var milestoneSeries = {
        type: 'scatter',
        name: 'Milestones',
        color: 'red',
        data: []
    };
    // 定义格式对应的标记样式映射
    var formatMarkerMap = {
        'Kickoff': { symbol: 'circle', fillColor: '#FF0000' },
        'Initial Out-brief': { symbol: 'triangle', fillColor: '#0000FF' },
        'Final Out-brief': { symbol: 'square', fillColor: '#00AA00' },
        'Milestone': { symbol: 'diamond', fillColor: '#FFA500' }
    };

    if (incomingdata != null && incomingdata.length > 0) {
        for (var i = 0; i < incomingdata.length; i++) {
            // 处理主任务数据
            let jsDate = new Date(incomingdata[i].start);
            var startUTC = Date.UTC(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate());
            
            jsDate = new Date(incomingdata[i].end);
            var endUTC = Date.UTC(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate());
            
            SeriesDataArray.push({
                name: incomingdata[i].name,
                start: startUTC,
                end: endUTC,
                y: incomingdata[i].y,
                id: incomingdata[i].id,
            });

            // 处理details生成里程碑数据
            var details = incomingdata[i].details;
            if (details && details.length > 0) {
                details.forEach(detail => {
                    let date = new Date(detail.x);
                    var xUTC = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
                    // 从映射表获取样式，默认用circle和灰色
                    var markerStyle = formatMarkerMap[detail.format] || { symbol: 'circle', fillColor: '#888888' };
                    milestoneSeries.data.push({
                        x: xUTC,
                        y: detail.y,
                        marker: {
                            symbol: markerStyle.symbol,
                            radius: 8,
                            fillColor: markerStyle.fillColor
                        },
                        dataLabels: {
                            enabled: true,
                            format: detail.format
                        }
                    });
                });
            }
        }

        BuildChart(SeriesDataArray, milestoneSeries);
    }
});

修改BuildChart函数 #

将主任务系列和里程碑scatter系列同时传入图表的series数组：

function BuildChart(SeriesDataArray, milestoneSeries) {
    Highcharts.ganttChart('container', 
    {
        title: {
            text: 'Gantt Chart with Multiple Symbols and Additional Text'
        },
        series: [
            {
                name: '任务',
                data: SeriesDataArray,
            },
            milestoneSeries // 添加里程碑系列
        ],       
    });
}

问题2：修复名称显示（tooltip里的[object Object]问题） #

你之前的错误是把对象数组直接赋值给了series的name属性，series的name是整个系列的名称（字符串类型），单个任务的名称已经在SeriesDataArray的每个数据项name字段中。若要在y轴显示任务名称，需配置y轴的categories：

修正后的代码调整 #

1. 在document ready中收集y轴分类：

// 新增变量存储y轴分类
var yAxisCategories = [];
// 在循环内添加：
yAxisCategories.push(incomingdata[i].id); // 可替换为incomingdata[i].name等你需要显示的名称

2. 修改BuildChart函数，配置y轴和自定义tooltip：

function BuildChart(SeriesDataArray, milestoneSeries, yAxisCategories) {
    Highcharts.ganttChart('container', 
    {
        title: {
            text: 'Gantt Chart with Multiple Symbols and Additional Text'
        },
        yAxis: {
            categories: yAxisCategories, // 设置y轴分类名称
            title: {
                text: '任务'
            }
        },
        series: [
            {
                name: '任务',
                data: SeriesDataArray,
            },
            milestoneSeries
        ],
        tooltip: {
            // 自定义tooltip格式，确保显示正确内容
            formatter: function() {
                if (this.series.type === 'gantt') {
                    return `<b>${this.point.name}</b><br/>
                            开始: ${Highcharts.dateFormat('%Y-%m-%d', this.point.start)}<br/>
                            结束: ${Highcharts.dateFormat('%Y-%m-%d', this.point.end)}`;
                } else {
                    return `<b>${this.point.dataLabels.format}</b><br/>
                            日期: ${Highcharts.dateFormat('%Y-%m-%d', this.point.x)}`;
                }
            }
        }
    });
}

3. 调用BuildChart时传入yAxisCategories：

BuildChart(SeriesDataArray, milestoneSeries, yAxisCategories);

修改后，tooltip会正确显示任务名称，y轴也会展示对应分类，不会再出现[object Object]的错误。

内容的提问来源于stack exchange，提问作者FlyFish