0

我有一个如下图表。

http://jsfiddle.net/Mn6sB/4/

$(function () {
        $('#chartContainer').highcharts({
            chart: {
                renderTo: 'chartContainer',
                type: 'column',
                marginTop:50,
                spacingBottom: 5,
                marginBottom: 100
            },
            credits: {
                  enabled: false
              },
            title: {
                text: 'Product health',

            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'datetime',
                minTickInterval: 24 * 3600 * 1000,
                dateTimeLabelFormats: { 
                    month: '%e %b',
                    year: '%b'
                }
            },
            yAxis: {
                min: 0,
                max:100,
                tickInterval:10,
                title: {
                    text: 'Passrate'
                },
            },
            legend: {
                            title: {
                                text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
                                style: {
                                    fontStyle: 'italic'
                                }
                            },
                            layout: 'horizontal',
                        },
            tooltip: {
                formatter: function() {
                         return 'Branch: <b>'+ this.series.name +
                            '</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
                                '</b><br/>Pass rate: '+ this.y +'%';
                }
            },
            plotOptions: {
                spline: {
                    dataLabels: {
                        enabled: 'True'
                    },
                    enableMouseTracking: false
                }
            },
            series: [{name: 'BranchX', data:[[Date.UTC(2013,9,3),88],[Date.UTC(2013,9,4),100],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),100],[Date.UTC(2013,9,7),100],[Date.UTC(2013,9,8),100],[Date.UTC(2013,9,9),100],]},{name: 'BranchY', data:[[Date.UTC(2013,9,3),75.27],[Date.UTC(2013,9,4),83.33],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),63.64],[Date.UTC(2013,9,7),98.31],[Date.UTC(2013,9,8),98.9],[Date.UTC(2013,9,9),64.71],]},]
        });
    });

这是一个显示通过百分比的柱形图。

我想传递用于计算 % vlaues 的数字(passcount、总计数),以便我可以将它们显示为工具提示。有可能吗?

4

1 回答 1

1

是的,这是可能的,而且很简单

传递系列中的 addl 数字以及从工具提示访问它们的数据,如下所示从格式化程序

tooltip:{
 formatter: function() {
  this.point.options.passCount
  this.point.options.total
 }
}

series:[{
 data: [{
  x: timestamp,
  y: value,
  passCount: someVlaue,
  totalCount: someValue
 },{
  x: timestamp,
  y: value,
  passCount: someVlaue,
  totalCount: someValue
 },{
  x: timestamp,
  y: value,
  passCount: someVlaue,
  totalCount: someValue
 }]
}]
于 2013-10-25T07:08:05.257 回答