Highcharts:加粗堆积列的最后总值

时间:2015-04-28 19:53:36

标签: highcharts

我一直试图加粗这个堆叠列的最后总值。需要帮助。

提前致谢!

一直要求我写更多 它一直要求我写更多 它一直要求我写更多 它一直要求我写更多 它一直要求我写更多 它一直要我写更多

http://jsfiddle.net/leslie20/ekyLqz47/

$(function () {

         Highcharts.setOptions({
            global: {
              VMLRadialGradientURL: 'http://code.highcharts.com/{version}/gfx/vml-radial-gradient.png',  // Path to the pattern image required by VML browsers in order to draw radial gradients.
              canvasToolsURL: 'http://code.highcharts.com/{version}/modules/canvas-tools.js'            // The URL to the additional file to lazy load for Android 2.x devices. These devices don't support SVG, so we download a helper file that contains canvg, its dependecy rbcolor, and our own CanVG Renderer class.
            },
            title: {
                align: 'left',
                style : { color: '#f7921e',fontSize: '14px', fontWeight: 'bold'}
            },
            plotOptions: {
                series: {
                    groupPadding: 0.1,
                    pointWidth: 28,
                    padding: 2
                }
            },
            xAxis: {
                tickColor: 'null',
                lineColor: '#4d4d4f',
                labels: {
                    formatter: function () {
                        if (this.isLast) {
                            return '<span style="font-weight: bolder; font-size: 12px">' + this.value + '</span>';
                        }
                         else {
                           return this.value;
                        }
                    }
                }
            },
            legend: {
                itemStyle: {
                    fontWeight: 'normal'
                }
            },
            credits: {enabled: false},
            lang: {
              loading: 'Loading...', // The loading text that appears when the chart is set into the loading state 
              thousandsSep: ','  // The default thousands separator used in the Highcharts.numberFormat method unless otherwise specified in the function arguments.
            }
            // tooltip: {enabled: false}
          });

$('#container6').highcharts({
            chart: { type: 'column' },
            title: { text: 'Cash Distribution Per Share (Declared)'},

            xAxis: {
                categories: [
                    '2010',
                    '2011',
                    '2012',
                    '2013',
                    '2014'
                ]
            },
            legend: {
                reversed: true,
            },

            yAxis: {
                min: 0,
                gridLineColor: '#FFFFFF',
                title: {text: ''},
                labels: { enabled: false },
                stackLabels: { 
                    enabled: true,
                    y: -3,
                    formatter: function() {
                        return  Highcharts.numberFormat(this.total, 1);
                    },

                    style: {
                        fontWeight: 'normal'
                    }
                }
            },
            plotOptions: {

                column: {
                    stacking: 'normal',

                    dataLabels: {
                        enabled: true,
                        format: '{point.y:,.1f}',
                        style: {
                          textShadow: false, 
                      }
                    }

                }
            },
            series: [{
                name: 'Special dividend<br>(cents)',
                tooltip: {
                    pointFormat: 'Special dividend: <b>{point.y:,.1f} cents</b>'
                },
                color: '#414042',
                data: [3.5, null, 1.7, 7.1, null],
                dataLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'normal'
                    },
                    formatter: function() {
                        if (this.y != 0) {
                          return this.y;
                        } else {
                          return null;
                        }
                    }
                }

            }, {
                name: 'Final dividend<br>(cents)',
                tooltip: {
                    pointFormat: 'Final dividend: <b>{point.y:,.1f} cents</b>'
                },
                color: '#f7921e',
                dataLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'normal'

                    },
                },
                data: [7.7, 7.9, 6.3, 7.1, {
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bolder',
                            fontSize: '12px'
                        },
                    },
                    y: 11.9
                }],



            }, {
                name: 'Interim dividend<br>(cents)',
                tooltip: {
                    pointFormat: 'Interim dividend: <b>{point.y:,.1f} cents</b>'
                },
                color: '#939598',
                dataLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'normal'
                    },
                },
                data: [6.3, 6.6, 6.6, 6.8, {
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bolder',
                            fontSize: '12px'
                        },
                    },
                    y: 7.0
                }],

            }]
        });


    });

提前致谢!

2 个答案:

答案 0 :(得分:1)

您可以使用stacklabels formatter然后检查xAxis上的最后一个刻度与stacklabel的当前x进行比较。如果这是相同的,那么加粗。

formatter: function () {
                var ticks = this.axis.chart.xAxis[0].tickPositions,
                    len = ticks.length,
                    last = ticks[len - 1];

                if(this.x === last) 
                    return '<span style="font-weight:bold">' + Highcharts.numberFormat(this.total, 1) + '</span>';
                else
                    return Highcharts.numberFormat(this.total, 1);
            },

示例:http://jsfiddle.net/ekyLqz47/2/

答案 1 :(得分:0)

只需将yAxis.stackLabels.style.fontWeight设置为'粗体'而不是'正常'。

yAxis: {
    min: 0,
    gridLineColor: '#FFFFFF',
    title: {
        text: ''
    },
    labels: {
        enabled: false
    },
    stackLabels: {
        enabled: true,
        y: -3,
        formatter: function () {
            return Highcharts.numberFormat(this.total, 1);
        },
        style: {
            fontWeight: 'bold'
        }
    }
},