javascript - 点中的附加数据 Highcharts 中工具提示的格式

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

});
});

fiddle 是here 。该代码不显示“z”。有人可以帮我解决这个问题吗？

Answer 1

我认为最好的想法是在图表的情况下使用键数组。这将使您可以在数据点内添加新参数。在这里您可以找到有关keys参数的更多信息: 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/

致以诚挚的问候。