High charts showing the composition of count as to

2019-09-09 06:30发布

问题:

I have a chart as below.

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],]},]
        });
    });

This is a column graph showing the pass percentage.

I wanted to pass the numbers (passcount, total count) which were used to calculate the % vlaues, so that I can show them as tooltip. Is is possible?

回答1:

yes this is possible and simple

pass the addl numbers in the series along with data access them from tool tip as shown below from the formatter

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