2

我的要求是创建一个蜘蛛网高图，每个轴上都有值，每个轴都有不同的比例。这可能吗？我附上了我的要求的相同输出。

在此处输入图像描述

4

2 回答 2

3

使用多个 yAxis 并使用 startAngle 将它们分配给分隔的窗格。

解析器

var colors = Highcharts.getOptions().colors,
    each = Highcharts.each,
    series = [{
      yAxis: 0,
      data: [10, 20, 30]
    }, {
      yAxis: 1,
      data: [1, 2, 3]
    }, {
      yAxis: 2,
      data: [4, 2, 1]
    }, {
      yAxis: 3,
      data: [5, 1, 3]
    }, {
      yAxis: 4,
      data: [2, 3, 4]
    }],
    yAxis = [],
    panes = [],
    startAngle = 0;

  each(series, function(serie, i) {
    yAxis.push({
      pane: i,
      showLastLabel: true,
      gridLineWidth: i === 0 ? true : false,
      labels: {
        useHTML: true,
        formatter: function() {
          return '<span style="color:' + colors[i] + '">' + this.value + '</span>';
        }
      }
    });

    panes.push({
      startAngle: startAngle
    });

    startAngle += 72;
  });

图表配置

$('#container').highcharts({
   /*
     chart options
   */
   pane: panes,
   yAxis: yAxis,
   series: series
});

例子：

于 2016-08-04T11:24:55.130 回答
0

由于他对属性的建议，我相信Sebastian Bochan 的回答是坚如磐石。pane但是，我正在修改另一种方法，并想与您和社区分享。

我的解决方案使用“虚拟”系列，这些系列是用户看不到或与之交互的系列，但可以帮助定制功能，例如您的标签。

我添加了六个“虚拟”系列，其中包含蜘蛛图每个辐条的标签。第一个，对于“零”值，是空白的，但其他的将显示沿辐条的第一个、第二个、第三个等点的数据标签。

图表绘制完成后，我使用addSeries()函数将这些“虚拟”系列添加到图表中：

// Add "dummy series to control the custom labels.
// We will add one for each spoke, but first will always be 
// overriden by y-axis labels; I could not figure out how to 
// disable that behavior.
// The color, showInLegend, and enableMouseTracking attributes 
// prevent the user from seeing or interacting with the series
// as they are only used for the custom labels.
var chart = $('#container').highcharts();
var labelArray = [
    ['','1','2','3','4','5'],
    ['','j','k','l','m','n'],
    ['','one','two','three','four','five'],
    ['','u','v','w','x','y'],
    ['','a','b','c','d','e']
];
for (var i = 0; i<=5; i++) {
    chart.addSeries({
        name: 'dummy series #' + i + ' for label placement',
        data: [
            { name: labelArray[0][i], y: i }, 
            { name: labelArray[1][i], y: i }, 
            { name: labelArray[2][i], y: i }, 
            { name: labelArray[3][i], y: i }, 
            { name: labelArray[4][i], y: i }
        ],
        dataLabels: {
            enabled: true, padding: 0, y: 0,
            formatter: function() {
            return '<span style="font-weight: normal;">' + this.point.name + '</span>';
        }
        },
        pointPlacement: 'on',
        lineWidth: 0,
        color: 'transparent',
        showInLegend: false,
        enableMouseTracking: false
    });
}

需要注意的几点：

  • lineWidth: 0并使color: 'transparent'“虚拟”系列线不可见
  • showInLegend: false防止他们出现在传说中
  • enableMouseTracking: false阻止用户与他们交互

这是显示其工作原理的小提琴：http: //jsfiddle.net/brightmatrix/944d2p6q/

结果如下所示：

在此处输入图像描述

只是我在评论中指出的怪癖：我无法弄清楚如何覆盖第一个辐条上的标签（在 12 点钟位置）。如果我将 y 轴标签设置为“假”，它会拒绝显示任何内容，即使是我在“虚拟”系列中设置的自定义数据标签。因此，我建议您的第一个辐条是您示例中的数字标签。

我意识到这可能是一条更复杂的路线，但我希望它在某种程度上对您和其他人有所帮助。

于 2016-08-04T12:41:24.290 回答