如何計算兩者的總數據值並在圖例中顯示

我已爲2個系列的男性和女性創建了一個高圖表類型的列。如圖所示，我想顯示「安裝」並顯示在圖例下方的總計數。如何計算兩者的總數據值並在圖例中顯示

如何使用與總價值圖標的HTML。

這裏是我的highcharts代碼和JSFiddle

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

    chart: { 
     type: 'column' 
    }, 
    credits: { 
    enabled: false 
    }, 
    title: null, 

    xAxis: { 
     categories: ['15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '45-50'] 
    }, 

    yAxis: { 
    min: 0, 
    max: 90, 
    pointInterval: 30, 
    labels: { 
       formatter: function() { 
       return this.value + 'K'; 
     } 
      }, 
      title: null 
    }, 

    tooltip: { 
     formatter: function() { 
      return '<b>' + this.x + '</b><br/>' + 
       this.series.name + ': ' + this.y; 
     } 
    }, 

    navigation: { 
     buttonOptions: { 
      enabled: false 
     } 
    }, 
      legend: { 
     enabled: true, 
     align: 'center', 
     verticalAlign: 'top', 
     layout: 'horizontal' 

    }, 
    series: [{ 
     name: 'Men', 
     color: '#79ccde', 
     data: [57.56, 82, 32, 28, 12, 13, 7], 
     stack: 'male' 
    }, { 
     name: 'Women', 
     color: '#8787f5', 
     data: [33.66, 60, 35, 15, 10, 16, 9], 
     stack: 'female' 
    }] 
}); 
});

我怎樣才能實現與總計數和自定義HTML一樣傳奇？

來源

2016-01-17 Maqk

總所無處可在你的代碼中可以看出，但是'legend.labelFormatter函數可能是你用來適應它的東西。 –

爲了計算這兩個系列的總價值和你的傳奇顯示它您可以使用legend.labelFormatter： http://api.highcharts.com/highcharts#legend.labelFormatter

內labelFormatter功能，您可以遍歷所有的一系列的點，並增加它的價值來總結你想在您的標籤中顯示。

如果你想圖像添加到您的圖例標籤你需要設置legend.useHTML到真正： http://api.highcharts.com/highcharts#legend.useHTML

然後你可以格式化你的傳說爲HTML DIV。例如：

labelFormatter: function() { 
    var target = '<br>Target: ' + this.userOptions.target || 0, 
     installs = 1, 
     string, img; 
    Highcharts.each(this.userOptions.data, function(p, i) { 
     installs += p; 
    }); 
    if (this.name === "Women") { 
     img = '<img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Woman_Silhouette_52.svg/2000px-Woman_Silhouette_52.svg.png" style = "width:45px"/> '; 
    } else if (this.name === "Men") { 
     img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/1/17/Human_outline.svg" style = "width:20px"/> '; 
    } 
    string = '<div style = "width: 200px">' + '<div class = "leg">' + img + '</div>' + '<div class = "leg">' + this.name + target + '<br>Installs: ' + installs + '</div>' + '</div>'; 
    return string 
    }

隱藏標準圖例符號，你可以將其寬度設置爲0： http://api.highcharts.com/highcharts#legend.symbolWidth

如果你想顯示你的提示相同的方式，你在你的圖像顯示，可以使用工具提示.shared屬性： http://api.highcharts.com/highcharts#tooltip.shared

例如： http://jsfiddle.net/am6zjhrj/10/

來源

2016-01-18 15:02:10

這正是我想要的。我將用實際圖像來實現它並更新代碼。謝謝@ Grzegorz-Blachliński – Maqk

如何計算兩者的總數據值並在圖例中顯示

回答

相關問題