如何使用更多细节格式化Highcharts

Question

我使用Highcharts创建了一个图表，其中我必须描绘图表中各种类型的项目状态及其左侧的详细信息，例如项目名称，状态和所有左侧。

现在我用JqGRID创建了我的左侧面板。但现在我只想和图表一起使用。

我创造了什么：

我需要做什么：

代码：

$(function () {
            $('#ao-projectssummry-chart').highcharts({
                chart: {
                    type: "columnrange",
                    inverted : true
                },
                title: { text: null },
                credits: { enabled: false },
                legend: { enabled: false },
                tooltip: {
                    formatter: function() {
                        return  '<b>' + this.series.name +'</b><br/>' +
                            Highcharts.dateFormat('%e - %b',
                                new Date(this.x))  ;
                    }
                },
                yAxis: {
                    opposite: true,
                    title : null,
                    crosshair: {
                        width: 2,
                        color: "#F26C6D",
                        snap: true,
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%a - %a - %y', new Date(this.x));
                        }
                    },
                    gridLineWidth: 1,
                    gridZIndex: 0,
                    type: 'datetime',
                    min: Date.UTC(2016, 0, 1),
                    max: Date.UTC(2016, 11, 31),
                },
                xAxis: {
                    categories: ['Set up', 'Quantification of Benefit', 'Execute', 'Deploy to Pilot Stores', 'Full Deployment', 'Roll out to Production'],
                    min: 0,
                    max: 5,
                    title: null,
                    gridLineWidth: 1,
                    gridZIndex: 0,
                    labels:
                        {
                            enabled: false
                        },
                    crosshair: {
                        snap: true

                    }
                },
                plotOptions: {
                    series: {
                        pointWidth: 10,
                        borderRadius: 0,
                        marker: {
                            enbled : false
                        }

                    },
                    line: {
                        lineWidth:-1,
                        marker: {
                            enabled: true,
                            radius:0,
                            symbol: 'circle'
                        }

                    }
                },
                series: [

                    {
                    name: "Project Tire Sale",
                    data: [
                      {
                          x: 0.40,
                          low: Date.UTC(2016,0,15),
                          high: Date.UTC(2016,2,15),
                          color: "#60B3D1"
                      },
                      {
                          x: 0.40,
                          low: Date.UTC(2016,2,15),
                          high: Date.UTC(2016,4,24),
                          color: "#60B3D1"
                      },
                      {
                          x: 0.40,
                          low: Date.UTC(2016,4,7),
                          high: Date.UTC(2016,6,15),
                          color: "#9CCB01"
                      }
                      ,
                      {
                          x: 0.40,
                          low: Date.UTC(2016, 6, 7),
                          high: Date.UTC(2016, 8, 15),
                          color: "#9CCB01"
                      },
                      {
                          x: 0.40,
                          low: Date.UTC(2016, 8, 7),
                          high: Date.UTC(2016, 10, 15),
                          color: "#9CCB01"
                      }
                    ]
                    },
                    {
                        name: 'Project Tire Sale',
                        type: 'line',
                        data: [
                            {
                                x: 0.40,
                                y: Date.UTC(2016,2,15),
                                marker: {                        
                                    symbol: 'url(/../Content/Img/ao-calendar.png)',

                                }
                            },
                            {
                                x: 0.40,
                                y: Date.UTC(2016,4,10),
                                marker: { 
                                    symbol: 'url(/../Content/Img/ao-graph.png)',
                                }
                            },
                            {
                                x: 0.40,
                                y: Date.UTC(2016,6,15),
                                marker: { 
                                    symbol: 'url(/../Content/Img/ao-runningman.png)',
                                }
                            },
                            {
                                x: 0.40,
                                y: Date.UTC(2016, 8, 5),
                                marker: {
                                    symbol: 'url(/../Content/Img/ao-a.png)',
                                }
                            },
                            {
                                x: 0.40,
                                y: Date.UTC(2016, 10, 15),
                                marker: {
                                    symbol: 'url(/../Content/Img/ao-green-arrow.png)',
                                }
                            }

                        ]
                    }
               ]
            });
        });