根据x轴在Highcharts JS图上绘制一个点?

时间:2014-10-20 17:15:04

标签: javascript highcharts

http://api.highcharts.com/highcharts

以下是我的图表的图片:

enter image description here

它旨在向用户显示根据当前年龄在特定年龄结束/退出。

这是我的代码,声明了高图:

$('#container').highcharts({
    chart: {
        type: 'area'
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Graph'
    },
    xAxis: {
        allowDecimals: false,
        max: 100,
        title: {
            text: 'Age'
        }
    },
    yAxis: {
        max: 1000000,
        title: {
            text: 'Amount'
        },
        tickInterval: 1000000
    },
    tooltip: {
        pointFormat: 'Amount is <b>{point.y:,.0f}</b> at age {point.x}'
    },
    plotOptions: {
        area: {
            pointStart: 44,
            marker: {
                enabled: true,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
        name: 'Amount',
        data: [1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000,
        1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000,
        1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, 1000000, null, null, null, null,
        null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null,
        null, null, null, null, null, null, null, null, null, ]
    }]
});

我的问题是,我如何在图表上绘制一个随机点,它总是大于或等于x轴上的最后一个数字(年龄)?这一点需要突出(明显地)并在悬停时具有独特的文本(文本是我提供的值)。

我已经在文档中搜索了一下,并没有看到任何可以让我选择执行此操作的内容。

反正这样做很容易吗?如果不是,任何黑客都会产生这种影响,或者甚至是否可能?

1 个答案:

答案 0 :(得分:0)

以下是如何使用数据点添加其他系列的方法: http://jsfiddle.net/blaird/b1o3t21b/1/

, {
        type:'scatter',
        name: 'Some Point',
               marker: {
            symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)',
            width: 16,
            height: 16
        },
        data: [{
            x: 85,
            y: 500000
        }]
    }
相关问题