javascript - Highcharts 条形图 : possible to combine datapoints inside dataLabels?

标签 javascript jquery highcharts

我有一个包含两个系列的 Highcharts 水平条形图。是否可以将分组的数据点组合到每个数据标签中,以便它们一起出现,例如1.00/2.3?

代码:

var labels = [
    'AAA/Aaa',
    'AA+/Aa1',
    'AA/Aa2',
    'AA-/Aa3',
    'A+/A1',
    'A/A2',
    'A-/A3'
];
var theData = [
    {
        name: 'Company 1',
        data: [0.576,7.617,12.101,18.839,18.022,7.644,9.72]
    },
    {
        name: 'Company 2',
        data: [4.123,12.862,14.561,13.754,12.226,11.135,7.51]
    }
];

HIGHCHARTS 配置:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        legend: {
            align: 'center',
            layout: 'horizontal',
            verticalAlign: 'bottom'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        var out = '<span class="col-chart-label">';
                        out +=  this.y + ' / ' + this.y;
                        out += '</span>'
                        return out;
                    },
                    useHTML: true
                }
            }
        },
        series:  theData,
        tooltip: {
            enabled: false
        },
        xAxis: {
            categories: labels,
            labels: {
                formatter: false,
                overflow: 'justify',
                rotation: false
            },
            reversed: true
        }
    });
});

演示在这里: http://jsfiddle.net/dylanmac/RungW/2/

重申一下,每对条形应该有一个数据标签,顶部条形为第一个值,底部条形为第二个值,以“/”分隔

非常感谢。

最佳答案

您可以遍历所有系列并对特定类别的值求和,请参阅:http://jsfiddle.net/RungW/3/

                formatter: function() {
                    var out = '<span class="col-chart-label">',
                        series = this.point.series.chart.series,
                        p1 = series[0].yData[this.point.x],
                        p2 = series[1].yData[this.point.x];
                    out +=  this.y + ' / ' + (p1 + p2);
                    out += '</span>'
                    return out;
                },

关于javascript - Highcharts 条形图 : possible to combine datapoints inside dataLabels?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18750627/

相关文章:

javascript - 如何确保 HTML 输入仍然是必需的?

javascript - 如何检测在 jqgrid 中何时选择了一行并且未选择任何行?

javascript - IE 禁用将颜色更改为灰色

javascript - 解析 Highcharts 的 JSON 数据

Javascript - 将带有 SVG 的 HTML div 转换为图像

javascript - 为什么 jQuery 中的 $(this) 不起作用?

javascript - ajax响应错误(XML解析错误: no element found Location: moz-nullprincipal)

javascript - 使用 Bluebird/NodeJS Promises 将参数顺序交换为 "then"

php - 更改数据库验证的日期格式

javascript - 限制 HighCharts 中的数据点数量