Zusätzliche Daten in pointFormat von Tooltip in highcarts

Question

Ich habe das folgende js-Skript, wo meine Absicht ist, ein zusätzliches bisschen Information für jeden Punkt anzuzeigen. Der folgende Code enthält einen Punkt und eine z-Dimension, die angezeigt werden soll.

$(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}' 
     } 
    }] 

}); 
}); 

Die Geige ist here. Der Code zeigt das 'z' nicht an. Kann mir jemand dabei helfen?

Answer 1

Ich denke, dass die beste Idee ist, Tasten Array im Falle Ihres Diagramms zu verwenden. Dies gibt Ihnen die Möglichkeit, neue Parameter in Ihren Datenpunkten hinzuzufügen. Hier finden Sie weitere Informationen über Tasten Parameter finden: 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}' 
    } 
} 

Und hier können Sie ein Beispiel sehen, wie Ihre Tabelle können Blicke mit den Tasten: http://jsfiddle.net/uejv2Lyh/2/

Mit freundlichen Grüßen.