highcharts 笔记

reset zoom 重置

$(function() {

function resetChartZoom() {
    chart.zoomOut();
}

var chart = new Highcharts.StockChart({
    
    chart: {
        renderTo: 'container',
        borderWidth: 1,
        plotBorderWidth: 1,
        resetZoomButton: {
            theme: {
                display: 'none'
            }
        },
        zoomType: 'xy'
    },
    
    rangeSelector: {
        selected: 1
    },
    
    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});

$('#resetZoom').click(function() {
    resetChartZoom();
});});

设置宽度

$('#container').highcharts().setSize(this.value, 400, false);

给highcharts 替换logo

方法只能通过修改源代码。

    showCredits: function (credits) {
        if (credits.enabled && !this.credits) {
            this.credits = this.renderer.text(
                credits.text,
                0,
                0
            )
            .on('click', function () {
                if (credits.href) {
                    location.href = credits.href;
                }
            })
            .attr({
                align: credits.position.align,
                zIndex: 8
            })
            .css(credits.style)
            .add()
            .align(credits.position);
            if (credits.image) {
                this.renderer.image(credits.image.url, 0, 0, credits.image.width, credits.image.height)
                    .attr({
                        align: credits.position.align,
                        zIndex: 8
                    })
                    .add()
                    .align(jQuery.extend(credits.position, {
                        x: credits.image.x,
                        y: credits.image.y
                    }));
            }
        }
    },

使用方法

Highcharts.setOptions({
        credits: {
            enabled: true,
            text: '',
            style: {
                color: '#ccc',
                fontSize: '12px'
            },
            image: {
                url: require.toUrl('common/img/credit.png'),
                width: 38,
                height: 13,
                x: -50,
                y: -15
            }
        },
        

把highcharts line 的线改为square 的形状

Highcharts.seriesTypes.line.prototype.drawLegendSymbol = Highcharts.seriesTypes.area.prototype.drawLegendSymbol;

x 轴有categories, 线始终从最左端开始

var categories = ['info1', 'info2', 'info3'];
xAxis： {
    categories: categories,
    tickPosition: 'inside',
    tickmarkPlacement: 'on',
    min: 0.5,
    max: categories.length - 1.5
}