javascript - Highcharts 极坐标图 - 为每个轴指定数据系列和工具提示

Question

我从其他论坛帖子中拼凑了( fiddle :http://jsfiddle.net/quint/wjveuLL3/1/)以下极坐标图。它有 5 个轴(第 1 轮、第 2 轮……)，每个轴上有 5 个点。我认为，代码中指定系列的方式是不正确的；然而，图表中显示的内容非常接近最终产品。如何指定每个数据系列以在每个轴上绘制点？如何自定义每个轴上的每个点(例如颜色、大小)？

主要目标:用户能够将鼠标悬停在每个点上，这将显示该轮中该点的附加数据。 (假设我有一个 JSON 对象，其中包含每轮每个数据点的数据)

仅供引用:以下是早期版本，显示图表上点的颜色和大小自定义 ( http://www.onlinecharttool.com/graph/image/51d9384b43aa )。图像中的其他所有内容均不相关。

任何方向将不胜感激。谢谢!

$(function () {

var NumIndices = 5
var Increment = Math.round(360/NumIndices)
var Axis = [0, 
             Increment, 
             2*Increment,
             3*Increment,
             4*Increment,
             ];
var Indicator1 = 'Round 1';
var Indicator2 = 'Round 2';
var Indicator3 = 'Round 3';
var Indicator4 = 'Round 4';
var Indicator5 = 'Round 5';

$('#container').highcharts({

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 72,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                switch (this.value) {
                   case Axis[0]:
                        return Indicator1;
                        break;
                   case Axis[1]:
                        return Indicator2;
                        break;
                   case Axis[2]:
                        return Indicator3;
                        break;
                   case Axis[3]:
                        return Indicator4;
                        break;
                   case Axis[4]:
                        return Indicator5;
                        break;
                                        default:
                        console.log('xAxis oops...');
                        break;
                 }
            }
        }
    },

    yAxis: {
            tickInterval: 1,
        labels: {
                enabled: false
                },
        min: 0,
        max: 5,
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 72
        },
    },

    series: [
        {
            type: 'line',
            name: 'Line',
            lineWidth : 0,
                marker : {
                    enabled : true,
                    radius : 5
                },
            data: [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4 , 5, 5, 5, 5, 5]
        }, 
    ]
});

});

Answer 1

数据点是在一系列数据中定义的。您可以在此处自定义每个点。有关更多信息，请参阅文档:http://www.highcharts.com/docs/chart-concepts/series#point

可以使用格式化程序在工具提示中添加更多数据。示例:http://jsfiddle.net/j86jkfvj/API:http://api.highcharts.com/highcharts#tooltip.formatter

从您发布的图表图像看来，您可能想在极坐标图中使用气泡图。示例:http://jsfiddle.net/ZYKQG/(类似问题:Is it possible to create a bubble polar chart with Highcharts?)