Highcharts覆盖默认的DataLabel

时间:2016-06-16 09:44:42

标签: javascript highcharts

我尝试使用以下代码覆盖默认的dataLabels规则,当图表是馅饼但它无效时。

我失踪了什么?

plotOptions: {
    series:{
        dataLabels:{
            shadow : false,
            allowOverlap:true,
            useHTML: true,
            style :{
                textShadow :'none',
                fontSize:"16px"
            },
            formatter: function () {
                return '<p>'+(this.y).format() + ' ' + suffixe+'</p>';
            }
        }
    },
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            style:{
                fontSize:"18px"
            },
            formatter: function() {
                return '<strong>'+ this.point.name +'</strong>: '+ this.y;
            }
        }
    }
}

我错过了什么

2 个答案:

答案 0 :(得分:1)

我在这里看到的一个问题是你在一次尝试做两件事。您应该在dataLabelsplotOptions.pie中设置plotOptions.series,但不能同时设置两者。

此外,您错过了plotOptions.series的一个步骤。正确的顺序是plotOptions --> series --> point --> dataLabels

plotOptions: {
    series:{
        point: {    // <-- here is your missing step
            dataLabels:{
                shadow : false,
                allowOverlap:true,
                useHTML: true,
                style: {
                    textShadow :'none',
                    fontSize:"16px"
                },
                formatter: function () {
                    return '<p>'+(this.y).format() + ' ' + suffixe+'</p>';
                }
            }
        }
    }
    // ... other options
}, // end plotOptions

这对你的问题有帮助吗?

答案 1 :(得分:1)

我修改了这样的代码以在格式化dataLabel之前检查类型我丢失了fontSize选项但是没关系:

plotOptions: {
    series:{
        dataLabels:{
            shadow : false,
            allowOverlap:true,
            useHTML: true,
            style :{
                textShadow :'none',
                fontSize:label_y_size+"px"
            },
            formatter: function () {
                if ( this.series.type == "pie") {
                    return '<strong>'+ this.point.name +'</strong>: '+ (this.y).format();
                } else {
                    return '<p>'+(this.y).format() + ' ' + suffixe+'</p>';
                };
            }
        }
    }
}

修改: highcharts中的这个错误:link