【问题标题】:Plot one point on Highcharts JS graph according to x-axis?根据x轴在Highcharts JS图上绘制一个点?
【发布时间】:2014-10-20 17:15:04
【问题描述】:

http://api.highcharts.com/highcharts

这是我的图表的图像:

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

这是我声明 highchart 的代码:

$('#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 个数据点的系列吗?还是更复杂的东西? jsfiddle.net/blaird/b1o3t21b/1
  • 把它放在一个答案中,这样我就可以接受——它解决了我的问题。

标签: javascript highcharts


【解决方案1】:

以下是添加具有数据点的另一个系列的方法: 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
        }]
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-04
    相关资源
    最近更新 更多