【问题标题】:highchart stacked column, display extremely small values in shift lablehighchart 堆积列,在移位标签中显示极小的值
【发布时间】:2014-08-20 15:51:18
【问题描述】:

我目前正在使用 [highchart js lib][1] 为我的项目创建堆积柱形图。

这是我的确切代码:

$(function () {
        $('#container').highcharts({
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            }
        });
    });

所以极小的值会显示在额外的标签中。

我什至不确定 highchart 库能否做到这一点,

请提供一些代码示例。干杯

【问题讨论】:

    标签: javascript jquery charts highcharts stacked-chart


    【解决方案1】:

    不幸的是,这不是默认支持的,但您可以尝试使用自适应解决方案,它会检测标签之间的冲突。

    load: function() {
                        StaggerDataLabels(this.series);
                    },
                    redraw: function() {
                        var series = this.series;
                        setTimeout(function() {
                            StaggerDataLabels(series);
                        }, 1000);
                    }
    

    http://jsfiddle.net/menXU/6/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-28
      • 1970-01-01
      相关资源
      最近更新 更多