具有不同轴范围（平行坐标）的Spiderweb图表

Question

我有角度服务，可为highcharts-ng提供highcharts配置。我在控制器中为此服务准备数据，然后以数据为参数调用服务。辛苦了但是，例如，如果我的范围是这样的[15,130,0.2]，我的蜘蛛网图表就会受到挤压。所以我想做不同的轴刻度，并且已经找到了使用parallel-coordinates.js的解决方案。

我很难使它起作用。第一张是我所拥有的，第二张是我想要实现的。

我所拥有的：https://jsfiddle.net/DuFuS/en51rbxc/

我想要的是：http://jsfiddle.net/DuFuS/tbzfhou5/

Answer 1

首先（也是最重要的一点），您正在使用非常旧的highcharts-ng软件包，这就是parallel-coordinates.js模块无法正常工作的原因。

此模块根据传递给统计图构造函数的数据量创建其他轴，但是不幸的是，在此版本的软件包中，data是统计图初始化上的空对象，因此parallel-coordinates.js模块不会根本不添加任何其他轴。

导致问题的下一件事情是此处的配置错误：

chart: {
  parallerlCoordinates: true,
  parallerAxes: {
...

应为parallelCoordinates和parallelAxes。

为了使您的图表可用，请将highcharts-ng软件包的版本更新为1.2.1，然后重新构建配置对象（因为结构已更改为新版本），如下所示：

return {
      chart: {
        parallelCoordinates: true,
        parallelAxes: {
          gridLineWidth: 0,
          lineWidth: 2,
          showFirstLabel: false,
          showLastLabel: true
        },
        polar: true,
        type: 'line'
      },
      xAxis: {
        categories: data.categories,
        tickmarkPlacement: 'on',
        lineWidth: 0
      },
      yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
      },
      series: data.series
    };

所有更改之后，图表将按预期显示。

实时示例： https://jsfiddle.net/rza5uk67/

打包文档： https://github.com/pablojim/highcharts-ng