Highcarts.js系列标签对齐行为

时间:2018-10-01 12:48:13

标签: javascript google-chrome firefox highcharts label

在使用Highcharts.js制作的图表中,我需要系列标签,因此,如网站中所建议的那样,我添加了series-label.js脚本。 没关系,但在Chrome和Opera中,其行为与其他浏览器(如FireFox或Safari)不同。如您所见

Highcharts.setOptions({
    lang: {
        months: ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli',
            'august', 'september', 'oktober', 'november', 'desember'],
        weekdays: ['sundag', 'm�ndag', 'tysdag', 'onsdag', 'torsdag', 'fredag', 'laurdag']
    },
    colors: ['#DF5353', '#aaeeee', '#ff0066', '#eeaaee', '#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee']
});
Highcharts.chart('container', {
    chart: {
        borderColor: '#4572A7',
        plotBorderWidth: 1,
        plotBorderColor: '#CCCCCC',
        backgroundColor: '#222',
        plotShadow: true,
        type: 'spline'
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        lineWidth: 1,
        lineColor: '#CCCCCC',
        tickPixelInterval: 80,
        tickLength: 5,
        tickWidth: 1,
        tickColor: '#FFFFFF',
        tickPosition: 'outside', // 'inside' or 'outside'
        gridLineWidth: 1,
        gridLineColor: '#444444',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%b', this.value);
            },
            align: 'left',
            x: 3
        },
        plotLines: [{
            value: Date.UTC(1971, 0, 1),
            color: '#444444',
            width: 3
        }],
        dateTimeLabelFormats: { // TODO: should this be a language setting as well?
            weekly: '%e. %b %y',
            twicemonthly: '%e. %b %y',
            monthly: '%b %y',
            twomonths: '%b %y',
            threemonths: '%b %y',
            fourmonths: '%b %y',
            sixmonths: '%b %y',
            yearly: '%Y'
        },
        showFirstLabel: true,
        showLastLabel: false,
        minRange: 30 * 24 * 3600 * 1000,
        startOnTick: true,
        endOnTick: true
    },
    yAxis: {
        min: 0, //0,
        max: 3.5,
        lineWidth: 1,
        lineColor: '#CCCCCC',
        tickPixelInterval: 50,
        tickLength: 5,
        tickWidth: 1,
        tickColor: '#FFFFFF',
        tickPosition: 'inside',
        gridLineWidth: 1,
        gridLineColor: '#444444',
        alternateGridColor: 'rgba(0, 0, 0, .2)',
        minorTickInterval: null,
        minorTickLength: 2,
        minorTickWidth: 0,
        minorTickColor: '#cccccc',
        minorTickPosition: 'outside',
        minorGridLineWidth: 1,
        minorGridLineColor: '#333333',
        minRange: 1,
        showFirstLabel: false,
        showLastLabel: true,
        labels: {
            formatter: function () {
                if (this.value % 1 === 0) {
                    return Highcharts.numberFormat(this.value, 0) + 'm';
                }
                return '';
            }
        },
        title: {
            text: 'Snjodjup'
        },
        maxZoom: 1
    },
    legend: {
        floating: true,
        layout: 'vertical',
        borderWidth: 1,
        borderColor: '#444444',
        borderCornerRadius: 5,
        shadow: true,
        backgroundColor: 'rgba(32, 32, 32, .75)',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 30,
        itemStyle: {
            color: '#CCCCCC',
            listStyle: 'none',
            listStyleImage: 'none'
        },
        itemHiddenStyle: {
            color: '#444444'
        },
        itemHoverStyle: {
            color: 'white'
        }
    },
    tooltip: {
        formatter: function () {
            var heading = this.series.name === 'Snitt' ?
                'Snitt' :
                "Vinteren " + (parseInt(this.series.name, 10) - 1) + "-" + this.series.name;

            return "<b>" + heading + "</b><br/>" + Highcharts.dateFormat('%e. %b', this.x, true) + ":<br/>" + Highcharts.numberFormat(100 * this.y, 0) + " cm snjo";
        },
        backgroundColor: 'rgba(0, 0, 0, .75)',
        borderWidth: 2,
        style: {
            color: '#CCCCCC'
        }
    },
    plotOptions: {
        series: {

            lineWidth: 2,
            shadow: true,
            marker: {
                enabled: false,
                symbol: 'circle',
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
        name: 'Snitt',
        dashStyle: 'shortdot',
        lineWidth: 4,
        shadow: false,
        color: '#888',
        data: [
            [24169600000, 0],
            [25379200000, 0.047603337526341],
            [26588800000, 0.19737645282537],
            [27798400000, 0.28491505667271],
            [29008000000, 0.40296707260495],
            [30217600000, 0.56964681386909],
            [31427200000, 0.74087962961224],
            [32636800000, 1.0603403778716],
            [33846400000, 1.3072110828202],
            [35056000000, 1.5097064081949],
            [36265600000, 1.6535664963435],
            [37475200000, 1.8619518260584],
            [38684800000, 1.8962671530145],
            [39894400000, 1.8812740280778],
            [41104000000, 1.7619060463346],
            [42313600000, 1.4540457031714],
            [43523200000, 0.97541033224884],
            [44732800000, 0.41658163265306],
            [45942400000, 0.12483134920635],
            [47152000000, 0]
        ]
    }, {
        name: '2000',
        data: [
            [27475200000, 0.00],
            [28339200000, 0.20],
            [33264000000, 1.90],
            [35683200000, 2.80],
            [37670400000, 3.40],
            [38880000000, 3.40],
            [40518000000, 3.30],
            [41209200000, 3.00],
            [42850800000, 2.00],
            [44233200000, 1.20],
            [44665200000, 1.10],
            [46047600000, 0.30],
            [46566000000, 0.00]
        ],
        visible: false
    }, {
        name: '2001',
        data: [
            [24706800000, 0.00],
            [26089200000, 0.20],
            [29635200000, 0.10],
            [32400000000, 0.20],
            [33091200000, 0.25],
            [34128000000, 0.35],
            [36892800000, 0.65],
            [38275200000, 1.00],
            [40345200000, 1.05],
            [43974000000, 0.30],
            [44578800000, 0.00]
        ],
        visible: false
    }, {
        name: '2002',
        data: [
            [25225200000, 0.00],
            [26265600000, 0.20],
            [28857600000, 0.50],
            [31622400000, 0.60],
            [32486400000, 0.50],
            [33782400000, 0.90],
            [36460800000, 2.00],
            [37670400000, 2.90],
            [38534400000, 2.70],
            [39567600000, 2.30],
            [40863600000, 2.00],
            [41641200000, 1.80],
            [42591600000, 1.55],
            [43542000000, 1.10],
            [44492400000, 0.40],
            [44838000000, 0.00]
        ],
        visible: false
    }, {
        name: '2003',
        data: [
            [25138800000, 0.00],
            [25830000000, 0.30],
            [26438400000, 0.50],
            [27043200000, 0.25],
            [27648000000, 0.50],
            [28598400000, 0.40],
            [30067200000, 0.40],
            [30758400000, 0.40],
            [31708800000, 0.47],
            [32313600000, 0.50],
            [33350400000, 1.20],
            [34041600000, 1.20],
            [35510400000, 1.30],
            [36201600000, 1.25],
            [37584000000, 1.50],
            [38361600000, 1.45],
            [39481200000, 1.65],
            [40258800000, 1.60],
            [40690800000, 1.50],
            [41814000000, 1.20],
            [42418800000, 1.15],
            [43369200000, 1.05],
            [44406000000, 0.40],
            [44578800000, 0.25],
            [44751600000, 0.00]
        ],
        visible: false
    }, {
        name: '2004',
        data: [
            [27734400000, 0.00],
            [28166400000, 0.10],
            [28684800000, 0.20],
            [29376000000, 0.40],
            [30326400000, 0.50],
            [30585600000, 0.60],
            [31276800000, 0.65],
            [31881600000, 0.65],
            [32313600000, 0.65],
            [32832000000, 0.80],
            [33868800000, 1.00],
            [34732800000, 1.15],
            [35251200000, 1.10],
            [35856000000, 1.10],
            [36720000000, 1.20],
            [37152000000, 1.20],
            [37670400000, 1.20],
            [38793600000, 1.35],
            [39654000000, 1.25],
            [40863600000, 1.15],
            [41727600000, 0.80],
            [42073200000, 0.65],
            [42678000000, 0.25],
            [43110000000, 0.00]
        ],
        visible: false
    }, {
        name: '2005',
        data: [
            [26352000000, 0.01],
            [26870400000, 0.10],
            [28684800000, 0.20],
            [29721600000, 0.20],
            [31017600000, 0.55],
            [31536000000, 0.60],
            [31795200000, 0.97],
            [32313600000, 1.61],
            [32832000000, 1.90],
            [33350400000, 1.85],
            [34732800000, 2.02],
            [35337600000, 2.43],
            [35942400000, 2.51],
            [37065600000, 2.47],
            [37843200000, 2.48],
            [38188800000, 2.53],
            [38880000000, 2.31],
            [39567600000, 2.20],
            [40086000000, 2.45],
            [40604400000, 2.59],
            [41382000000, 2.37],
            [41986800000, 2.20],
            [43196400000, 1.90],
            [44751600000, 1.20],
            [45702000000, 0.80],
            [46220400000, 0.40],
            [46566000000, 0.00]
        ],
        visible: false
    }, {
        name: '2006',
        data: [
            [26265600000, 0.00],
            [27907200000, 0.15],
            [29635200000, 0.20],
            [30326400000, 0.25],
            [30931200000, 0.30],
            [32140800000, 0.27],
            [32832000000, 0.48],
            [33264000000, 0.67],
            [33955200000, 0.69],
            [34214400000, 0.69],
            [34560000000, 0.69],
            [35164800000, 0.79],
            [35942400000, 0.68],
            [36374400000, 0.74],
            [36979200000, 0.75],
            [37324800000, 0.75],
            [38707200000, 0.75],
            [39308400000, 0.77],
            [39567600000, 0.89],
            [39999600000, 0.99],
            [40431600000, 1.15],
            [41382000000, 1.39],
            [41986800000, 1.09],
            [42418800000, 0.80],
            [43282800000, 0.40],
            [43974000000, 0.00]
        ],
        visible: false
    }, {
        name: '2007',
        data: [
            [25657200000, 0.00],
            [26265600000, 0.36],
            [27216000000, 0.35],
            [27820800000, 0.48],
            [29980800000, 1.00],
            [30499200000, 1.11],
            [30931200000, 0.90],
            [32572800000, 1.76],
            [33264000000, 2.20],
            [33868800000, 2.17],
            [34128000000, 2.40],
            [34473600000, 2.25],
            [34732800000, 2.34],
            [35078400000, 2.27],
            [35683200000, 2.27],
            [36288000000, 2.39],
            [37497600000, 2.48],
            [38102400000, 3.07],
            [38448000000, 2.93],
            [39308400000, 2.78],
            [39740400000, 2.80],
            [39999600000, 2.94],
            [40172400000, 2.94],
            [41986800000, 2.25],
            [42937200000, 2.02],
            [43542000000, 1.98],
            [44146800000, 1.78],
            [44665200000, 1.40],
            [45270000000, 0.55],
            [46047600000, 0.20],
            [46220400000, 0.00]
        ],
        visible: false
    }, {
        name: '2008',
        data: [
            [25916400000, 0.00],
            [27043200000, 0.60],
            [27734400000, 0.70],
            [28944000000, 0.80],
            [29548800000, 0.60],
            [30153600000, 0.60],
            [31190400000, 0.67],
            [31536000000, 0.81],
            [32140800000, 0.78],
            [32486400000, 0.98],
            [33782400000, 1.84],
            [34992000000, 1.80],
            [35683200000, 1.80],
            [36201600000, 1.92],
            [36892800000, 2.49],
            [37497600000, 2.79],
            [37843200000, 2.73],
            [38707200000, 2.61],
            [39481200000, 2.76],
            [39826800000, 2.82],
            [40431600000, 2.80],
            [42159600000, 2.10],
            [44146800000, 1.10],
            [45356400000, 0.25],
            [45615600000, 0.00]
        ],
        visible: false
    }, {
        name: '2009',
        data: [
            [25138800000, 0.00],
            [25830000000, 0.20],
            [28857600000, 0.47],
            [29721600000, 0.55],
            [30931200000, 1.38],
            [32140800000, 1.38],
            [32745600000, 1.38],
            [34214400000, 1.38],
            [34819200000, 1.48],
            [35942400000, 1.50],
            [37584000000, 1.89],
            [38707200000, 2.00],
            [39654000000, 1.94],
            [40086000000, 1.91],
            [40431600000, 1.75],
            [40950000000, 1.60],
            [44060400000, 0.60],
            [44578800000, 0.35],
            [45183600000, 0.00]
        ],
        visible: false
    }, {
        name: '2010',
        data: [
            [24361200000, 0.00],
            [24793200000, 0.15],
            [28598400000, 0.35],
            [29808000000, 0.46],
            [31536000000, 0.59],
            [33523200000, 0.58],
            [34214400000, 0.62],
            [34732800000, 0.65],
            [36115200000, 0.77],
            [37238400000, 0.77],
            [37756800000, 0.79],
            [38620800000, 0.86],
            [39654000000, 0.80],
            [40863600000, 0.94],
            [41382000000, 0.90],
            [43282800000, 0.39],
            [43714800000, 0.00]
        ],
        visible: true
    }, {
        name: '2011',
        data: [
            [25052400000, 0.00],
            [25484400000, 0.18],
            [26697600000, 0.32],
            [27388800000, 0.40],
            [27993600000, 0.38],
            [29808000000, 0.40],
            [31104000000, 0.56],
            [33004800000, 1.07],
            [33436800000, 1.00],
            [34905600000, 1.78],
            [35596800000, 1.60],
            [36374400000, 1.57],
            [37756800000, 1.96],
            [38188800000, 1.82],
            [38793600000, 1.80],
            [39308400000, 1.90],
            [40518000000, 1.68],
            [41295600000, 1.25],
            [42505200000, 0.85],
            [43974000000, 0.00]
        ],
        visible: true
    }, {
        name: '2012',
        data: [
            [27043200000, 0.00],
            [27475200000, 0.05],
            [28512000000, 0.20],
            [29635200000, 0.65],
            [30240000000, 1.18],
            [31276800000, 1.17],
            [31968000000, 1.60],
            [32659200000, 2.04],
            [33177600000, 2.22],
            [34473600000, 2.00],
            [36374400000, 2.53],
            [36892800000, 2.16],
            [38188800000, 2.35],
            [39308400000, 2.03],
            [39826800000, 2.11],
            [41209200000, 2.15],
            [41727600000, 2.05],
            [43196400000, 2.28],
            [43974000000, 1.65],
            [44233200000, 1.45],
            [44838000000, 1.25],
            [45356400000, 0.97],
            [46047600000, 0.50],
            [46825200000, 0.00]
        ],
        visible: true
    }, {
        name: '2013',
        data: [
            [25311600000, 0.00],
            [26524800000, 0.28],
            [26956800000, 0.25],
            [28512000000, 0.20],
            [28944000000, 0.28],
            [31017600000, 0.28],
            [31276800000, 0.47],
            [32400000000, 0.79],
            [33696000000, 0.72],
            [34387200000, 1.02],
            [35078400000, 1.12],
            [36288000000, 1.20],
            [37497600000, 1.18],
            [40172400000, 1.19],
            [41900400000, 1.85],
            [42246000000, 2.22],
            [43455600000, 1.15],
            [44751600000, 0.00]
        ],
        visible: true
    }, {
        type: 'spline',
        name: '2014',
        data: [[26049600000, 0.00], [27000000000, 0.40], [28900800000, 0.25], [31579200000, 1.66], [32356800000, 1.80], [35812800000, 1.76], [38750400000, 2.62], [40906800000, 2.41], [41857200000, 2.05], [43066800000, 1.70], [43930800000, 1.10], [45399600000, 0.00]],
        visible: true
    }, {
        type: 'areaspline',
        name: '2015',
        color: '#FFFFFF',
        label: {
            onArea: false
        },
        lineWidth: 3,
        marker: {
            enabled: true
        },
        fillColor: 'rgba(170, 238, 238, .4)',
        data: [[28382400000, 0.00], [29332800000, 0.25], [30542400000, 1.41], [30974400000, 1.64], [31838400000, 1.60], [32961600000, 2.55], [33566400000, 2.62], [34516800000, 2.50], [35380800000, 2.42], [37108800000, 2.74], [37800000000, 2.62], [38664000000, 2.60], [39438000000, 2.81], [40302000000, 2.63], [41684400000, 2.77], [42289200000, 2.68], [42721200000, 2.56], [43153200000, 2.39], [43585200000, 2.30], [44967600000, 2.00], [45399600000, 1.85], [45831600000, 1.49], [46263600000, 1.27], [46695600000, 0.99], [47041200000, 0.74]],
        visible: true
    }]
});
#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<div id="container"></div>

Chrome中的标签位于中间,而FireFox中的标签位于该系列的结尾(如我所愿)。 在https://api.highcharts.com/highcharts/plotOptions.line.label处,我看不到指定放置标签位置的任何可能性。

有人知道这样做的方法吗?

0 个答案:

没有答案