Question

我在其他论坛帖子中拼凑了一起（小提琴：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

数据点在一系列数据中定义。您可以在此处自定义每个点。有关详细信息，请参阅文档：

可以使用print(' < '.join(map(str,(1,2,3))))添加工具提示中的更多数据。示例：http://www.highcharts.com/docs/chart-concepts/series#point API：http://jsfiddle.net/j86jkfvj/

从您发布的图表图片中，您可能希望在极坐标图表中使用气泡图。示例：http://api.highcharts.com/highcharts#tooltip.formatter （类似问题：http://jsfiddle.net/ZYKQG/）

Highcharts极坐标图 - 指定数据系列＆amp;每个轴的工具提示

1 个答案: