highcharts 笔记

Pluser 发布于2019-08-19 17:10 / 3052人阅读

摘要：重置设置宽度给替换方法只能通过修改源代码。使用方法把的线改为的形状轴有线始终从最左端开始

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
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78262.html

WEB前端资源集（一）

摘要：资源网站篇全球最大中文社区，为专业技术人员提供最全面的信息传播和服务平台伯乐在线专业的互联网职业社区创意工作者们的社区。做前端已经一年了，开发中换过很多开发工具，遇到bug到处求解，以及自学时到处找相关文章及教程，所以经过这么多的风波，我总结了一些对大家有帮助的网站，主题也将长期更新。资源网站篇 CSDN：全球最大中文IT社区，为IT专业技术人员提供最全面的信息传播和服务平台 ...

OnlyMyRailgun 2019-08-30 13:22 评论0 收藏0
WEB前端资源集（一）

摘要：资源网站篇全球最大中文社区，为专业技术人员提供最全面的信息传播和服务平台伯乐在线专业的互联网职业社区创意工作者们的社区。做前端已经一年了，开发中换过很多开发工具，遇到bug到处求解，以及自学时到处找相关文章及教程，所以经过这么多的风波，我总结了一些对大家有帮助的网站，主题也将长期更新。资源网站篇 CSDN：全球最大中文IT社区，为IT专业技术人员提供最全面的信息传播和服务平台 ...

shengguo 2019-08-21 15:06 评论0 收藏0
WEB前端资源集（一）

摘要：资源网站篇全球最大中文社区，为专业技术人员提供最全面的信息传播和服务平台伯乐在线专业的互联网职业社区创意工作者们的社区。做前端已经一年了，开发中换过很多开发工具，遇到bug到处求解，以及自学时到处找相关文章及教程，所以经过这么多的风波，我总结了一些对大家有帮助的网站，主题也将长期更新。资源网站篇 CSDN：全球最大中文IT社区，为IT专业技术人员提供最全面的信息传播和服务平台 ...

lanffy 2019-08-01 16:12 评论0 收藏0
美化Highcharts插件 react-beauty-highcharts

摘要：太丑了有木有修改好费劲所以有了这个插件轮子地址使用说明安装安装安装结合使用粉色 HighCharts太丑了,有木有HighCharts修改好费劲所以有了这个插件轮子 git地址使用说明安装 npm安装 npm install react-beauty-highcharts yarn安装 yarn add react-beauty-highcharts 结合 react-highch...

Youngdze 2019-08-23 14:24 评论0 收藏0