如何显示特定点以在HighCharts中显示特定信息

时间:2014-12-02 06:31:56

标签: highcharts

我是highcharts的新手,我正在开发一个板球应用程序,我必须在其中显示每次运行率和超过的wickets数量。如果在特定的位置有一个检票口,我想向该点显示一个球,并在悬停或点击该点时显示有关球员和投球手等的信息。 我想要的是你可以从这个链接Crichq Graphs查看 我希望像在crichq图中一样思考,但不知道该怎么做。

请帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

您可以使用点标记设置来指示小门落在哪里。例如使它成为不同的颜色和大小。 http://api.highcharts.com/highcharts#series.data.marker

我会按如下方式处理数据:

var ausData = [ { x:1, y:1 },
               { x:2, y:24, out:{num:2,names:['john','doe']} },
               { x:3, y:5 },
               { x:4, y:8 },
               { x:5, y:22 },
               { x:6, y:11 } ];
for (var p in ausData) {
    var point = ausData[p];
    if (point.out !== undefined) {
        point.marker = {fillColor:'red',radius:4*point.out.num};

    } else {
        point.marker = {radius:5};
    }
}

这从基本信息开始,然后根据小门的填充方式添加自定义点标记。

唯一要做的是自定义工具提示以提供名称,例如:

    tooltip: {
        formatter: function () {
            var text = 'Over: ' + this.x +
                ' Runs: ' + this.y;
            if (this.point.out !== undefined) {
                text = text + '<br>Out: ' + this.point.out.num;
                for (var n in this.point.out.names) {
                    text = text + ' ' + this.point.out.names[n];
                }
            }
            return text;
        }
    },

http://jsfiddle.net/d6fgwg14/