ハイチャートのツールチップのpointFormatの追加データ

Question

私は次のようなjsスクリプトを用意しています。ここでは、各ポイントの追加ビット情報を表示します。次のコードは、私が表示したいz次元の点を含んでいます。

$(function() { 
$('#container').highcharts({ 

    chart: { 
     type: 'boxplot' 
    }, 

    title: { 
     text: 'Highcharts Box Plot Example' 
    }, 

    legend: { 
     enabled: false 
    }, 

    xAxis: { 
     categories: ['1', '2', '3', '4', '5'], 
     title: { 
      text: 'Experiment No.' 
     } 
    }, 

    yAxis: { 
     title: { 
      text: 'Observations' 
     }, 
     plotLines: [{ 
      value: 932, 
      color: 'red', 
      width: 1, 
      label: { 
       text: 'Theoretical mean: 932', 
       align: 'center', 
       style: { 
        color: 'gray' 
       } 
      } 
     }] 
    }, 

    series: [{ 
     name: 'Observations', 
     data: [ 
      [760, 801, 848, 895, 965], 
      [733, 853, 939, 980, 1080], 
      [714, 762, 817, 870, 918], 
      [724, 802, 806, 871, 950], 
      [834, 836, 864, 882, 910] 
     ], 
     tooltip: { 
      headerFormat: '<em>Experiment No {point.key}</em><br/>' 
     } 
    }, { 
     name: 'Outlier', 
     color: Highcharts.getOptions().colors[0], 
     type: 'scatter', 
     data: [ // x, y positions where 0 is the first category 
      [0, 644, 766], 
      [4, 718], 
      [4, 951], 
      [4, 969] 
     ], 
     marker: { 
      fillColor: 'white', 
      lineWidth: 1, 
      lineColor: Highcharts.getOptions().colors[0] 
     }, 
     tooltip: { 
      pointFormat: 'Observation: {point.z}' 
     } 
    }] 

}); 
}); 

フィドルはhereです。コードに 'z'が表示されていません。誰も私にこれを助けることができますか？

Answer 1

あなたのチャートの場合にキー配列を使用することをお勧めします。これにより、データポイント内に新しいパラメータを追加することができます。ここでは、キーパラメータの詳細情報を見つけることができます。 http://api.highcharts.com/highcharts#plotOptions.boxplot.keys

{ 
    name: 'Outlier', 
    color: Highcharts.getOptions().colors[0], 
    type: 'scatter', 
    keys: ['x', 'y', 'z'], 
    data: [ // x, y positions where 0 is the first category 
    [0, 644, 766], 
    [4, 718], 
    [4, 951], 
    [4, 969] 
    ], 
    marker: { 
    fillColor: 'white', 
    lineWidth: 1, 
    lineColor: Highcharts.getOptions().colors[0] 
    }, 
    tooltip: { 
    pointFormat: 'Observation: {point.z}' 
    } 
} 

そして、ここでは、あなたのチャートは、ルックスキー使用する方法の例を見ることができます： http://jsfiddle.net/uejv2Lyh/2/

敬具。