Spiderweb複数の縮尺で複数の縮尺を持つハイチャート

Question

私の要件は、各縮尺が異なる各軸の値を持つスパイダーウェブのハイチャートを作成することです。可能でしょうか？私は私の要求と同じ出力を添付しました。

Answer 1

使用する複数のY軸と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; 
    }); 

チャートconfiguartion

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

例：

• http://jsfiddle.net/6jmqb1r8/

Answer 2

私はセバスチャンBochanの答えが原因pane属性の彼の提案に堅実であると考えています。しかし、私は別の方法で微妙に変化していて、それをあなたとコミュニティと共有したいと思っていました。

私の解決方法では、「ダミー」シリーズが使用されています。これは、ユーザーが表示や操作をしないシリーズですが、ラベルなどのカスタマイズされた機能に役立ちます。

スパイダーチャートの各スポークのラベルを含む6つの「ダミー」シリーズを追加しました。最初の「ゼロ」値は空白ですが、他のものはスポークに沿って1番目、2番目、3番目などのデータラベルが表示されます。

チャートが描かれた後、私はチャートにこれらの「ダミー」シリーズを追加し機能を使用します。注意すべき

// 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は、それらが凡例に現れないようにします。
• このようになりますhttp://jsfiddle.net/brightmatrix/944d2p6q/

  結果：enableMouseTracking: falseはここ

はこれがどのように機能するかを示しフィドルである彼らとの相互作用からユーザーを防ぐ

ちょうど私が述べた癖に私のコメントでは：私は最初のスポーク（12時位置に）のラベルを無効にする方法を見つけることができませんでした。 y軸のラベルを "false"に設定すると、ダミーのシリーズで設定したカスタムデータのラベルでさえ、何も表示されなくなりました。したがって、最初の話はあなたの例の数値ラベルであることをお勧めします。

これはおそらくもっと複雑なルートだと私は認識していますが、あなたと他の人にとっては何らかの形で役立つことを願っています。