高图:向倒排柱范围图系列添加符号

Highcharts: adding symbol to inverted columnrange chart series

本文关键字：系列 添加 符号 范围 高图      更新时间：2023-09-26

我希望开发一个甘特图从高图使用倒置柱范围图和需要的能力可视化里程碑(高图符号?)为给定的数据点。目前我得到的是:http://jsfiddle.net/gys2jxhw/。这可能吗?

$(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)]
        }]
    }]
});

});

你可以使用散点序列在任何你想要的地方放置一个点。

那么，在你的系列设置中:

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

添加第二个系列，类型为:scatter，并将点放置在需要的地方:

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)]
  ]
}]

更新小提琴:

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

然后，您可以通过使用工具提示和/或数据标签来进一步增强该值，以传达额外的信息。

相关文章：