Question

我正在尝试创建一个Spider图，其y轴标签与扩展网格线偏移。

这可以通过一个图表实现，还是必须创建两个单独的图形并覆盖它们？我已经尝试过刻度线，网格线，它们都被卡在极坐标中。

这是我尝试完成此任务的尝试： http://jsfiddle.net/6d6jrfhs/3/

{

    chart: {
        polar: true,
        type: 'line'
    },

    title: {
        text: "# of Impacts",
        x: -80
    },

    pane: {
        size: '80%',
        startAngle: 0,
    },

    xAxis: {
        categories: ['Back', 'Left', 'Front', 'Top',
                'Right'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        offset: 0,
        labels: {
            align: 'left',
            x: -100,
            y: 0
        },
        tickLength: 500,
        plotLines: [{
        color: 'red', // Color value
        dashStyle: 'longdashdot', // Style of the plot line. Default to solid
        value: 40000, // Value of where the line will appear
        width: 1 // Width of the line    
        }]
    },

    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 70,
        layout: 'vertical'
    },

    series: [{
            type:'area',
        name: 'Low Impact',
        data: [43000, 19000, 60000, 35000, 17000],
        pointPlacement: 'off'
    }, {
        type:'area',
        name: 'Actual Spending',
        data: [50000, 39000, 42000, 31000, 26000],
        pointPlacement: 'off'
    }]

}

Answer 1

此演示展示了如何在图表对象中查找标签（SVG元素）并使用 SVG渲染器创建其他网格线：http://jsfiddle.net/kkulig/eg7p3r48/

events: {
  render: function() {
    var yAxis = this.yAxis[0],
        renderer = this.renderer,
      label = yAxis.ticks[0].label;

      renderer.path(['M', label.xy.x, label.xy.y, 'l', label.xy.x - xOffset - 30, 0]).attr({
        stroke: 'black',
        'stroke-width': 1
      }).add();

  }
}

API参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

High Charts Polar / Spider chart with off-graph y-axis labels

1 个答案: