高图：向反转的柱形图系列添加符号

Question

I'm looking to develop a gantt chart from highcharts using an inverted columnrange chart and need to ability to visualize milestones (a highcharts symbol?) for a given data point. What I have so far: http://jsfiddle.net/gys2jxhw/ . Is this possible?

$(function () {

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true
    },

    title: {
        text: 'Project Deliverables'
    },

    xAxis: {
        categories: ['Task X']
    },

    yAxis: {
        title: {
            text: 'Timeline'
        },            
        type: 'datetime'
    },

    tooltip: {
        xDateFormat: '%Y-%m-%d'
    },

    plotOptions: {
        columnrange: {
            dataLabels: {
                enabled: false,
                formatter: function () {
                    return this.y;
                }
            }
        }
    },

    legend: {
        enabled: false
    },

    series: [{
        name: 'Timeline',
        data: [{
            low:Date.UTC(2013,5,2), 
            high: [Date.UTC(2013,5,12)]
        }]
    }]
});

});

Answer 1

You can use a scatter series to place a point anywhere you want.

So, with your series setup:

series: [{
  name: 'Timeline',
  data: [{
    low: Date.UTC(2013, 5, 2),
    high: [Date.UTC(2013, 5, 12)]
  }]
}]

Add a second series that is type: scatter, and place the point wherever you need it:

series: [{
  name: 'Timeline',
  data: [{
    low: Date.UTC(2013, 5, 2),
    high: [Date.UTC(2013, 5, 12)]
  }]
}, {
  name: 'Marker',
  type: 'scatter',
  data: [
    [0, Date.UTC(2013, 5, 12, 12, 0, 0)]
  ]
}]

Updated fiddle:

• http://jsfiddle.net/jlbriggs/gys2jxhw/1/

You could then further enhance the value by using the tooltip, and/or the data label, to communicate additional information.