文档章节

如何设置Highcharts刻度线

咲晚杍
 咲晚杍
发布于 2014/02/11 10:36
字数 293
阅读 80
收藏 0

Highcharts中,当使用多个轴线时,两个或两个以上相反轴的刻度将会自动添加到刻度线并且刻度线数最少。这个可以设置 alignTicks 为 false 来阻止。如果网格线显得零乱,这里有个方法来隐藏它们,就是设置 gridLineWidth 为 0。默认设置为 true。

操作一: alignTicks 默认设置为true

Highcharts设置刻度线为true

$(function () {
    $('#container').highcharts({
        chart: {
            //alignTicks: false,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            },
            gridLineWidth: 0
        }, {
            title: {
                text: 'Secondary Axis'
            },
            opposite: true
        }],
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return '
'+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            
        }, {
            data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
            yAxis: 1
            
        }]
    });
});

操作二: alignTicks 设置为false

Highcharts设置刻度线为false

$(function () {
    $('#container').highcharts({
        chart: {
            alignTicks: false,
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            }
        }, {
            title: {
                text: 'Secondary Axis'
            },
            gridLineWidth: 0,
            opposite: true
        }],
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            floating: true,
            align: 'left',
            x: 100,
            verticalAlign: 'top',
            y: 70
        },
        tooltip: {
            formatter: function() {
                return '

                '+
                    this.x +': '+ this.y;
            }
        },
        plotOptions: {
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            
        }, {
            data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
            yAxis: 1
            
        }]
    });
});
》》其他设置,查看原文

本文转载自:http://www.evget.com/article/2014/2/10/20502.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
如何设置Highcharts的刻度线

在Highcharts中,当使用多个轴线时,两个或两个以上相反轴的刻度将会自动添加到刻度线并且刻度线数最少。这个可以设置 alignTicks 为 false 来阻止。如果网格线显得零乱,这里有个方法来隐藏...

小白兔灰太狼
2014/02/10
1K
0
请问highcharts 图刻度如何由横式变直式?,请高手赐教

请问highcharts 图刻度如何由横式变直式?,请高手赐教

wythelin
2013/05/08
281
3
请教一个highcharts 坐标轴 刻度问题

请问highcharts 柱子图 刻度如何不出小数,而全出整数值,请高手赐教

赵国鑫
2011/10/26
3.2K
6
Highcharts 如何让时间轴显示为24小时

求助各位,用的是highcharts,现在这个图的时间轴刻度无法固定,我想让他显示为24个点,分别是24小时,要如何固定呢? 现在是这个样子的 我想让他显示成这样

USAGov
2015/09/22
4.9K
1
关于highchartsY轴刻度设置

highcharts下出现 问题如下: 1、我想让它和x轴重合.这种情况应该设置哪个参数呢? 2、当都小于10的时候,我想让Y轴刻度的最大值固定为10,应该怎么设置呢?? 下面是配置代码:...

Cycle_C
2013/07/29
9K
3

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
39分钟前
3
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
111
4
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部