HighCharts:显示y轴标签的百分比,而不是基本柱状图的绝对计数

HighCharts: display the y-axis labels in percentage instead of the absolute count for basic column charts

本文关键字:显示 标签 百分比 HighCharts      更新时间:2023-09-26

我刚开始使用highcharts,我正试图找到一种方法,用%来显示y轴标签,而不是基本柱状图的实际值/计数。有什么办法我能做到吗?有人能给我提个建议吗。

感谢

如果你只想更改轴标签,请查看我的答案并在这里修改示例:

简单条形图的高图表百分比

如果您希望工具提示也显示%值,您可以从该示例中的dataLabels格式化程序中复制代码来实现这一点。

不幸的是,此选项不可用,但您可以准备自己的函数,该函数将计算所有点并计算percetn值。然后返回数据序列的更新值。

您可以将计数更改为分布百分比,方法是取每个步骤的除法和除以计数。

下面是Highcharts示例histogram()函数,它被修改为显示百分比,请确保将yAxis设置为max1。如果您不希望小数百分比乘以100。

function histogram(data, step) {
    var histo = {},
        x,
        i,
        sum = 0,
        arr = [];
    // Group down
    for (i = 0; i < data.length; i++) {
        x = Math.floor(data[i][0] / step) * step;
        if (!histo[x]) {
        histo[x] = 0;
       }
        histo[x]++;
    }
    // Make the histo group into an array
    for (x in histo) {
        if (histo.hasOwnProperty((x))) {
            arr.push([parseFloat(x), histo[x]]);
        }
    }
    // find sum 
    for (i = 0; i < arr.length; i++) {
            sum += arr[i][1];
       }
    // calculate percent 
    for (i = 0; i < arr.length; i++) {
            arr[i][1] = arr[i][1]/sum ;
        }
    // sort the array
    arr.sort(function (a, b) {
        return a[0] - b[0];
    });
    return arr;
}

小提琴:http://jsfiddle.net/jamie_farrell/xy7uogz4/2/