Highcharts 中文社区

 找回密码
 立即注册
查看: 494|回复: 0

[技术贴] 使用Highchart库做漂亮图表---通用API简介

[复制链接]
  • TA的每日心情
    开心
    2017-9-1 16:07
  • 签到天数: 23 天

    [LV.4]偶尔看看III

    5

    主题

    9

    帖子

    93

    积分

    HC 新手

    Rank: 1

    积分
    93
    发表于 2016-12-6 15:45:37 | 显示全部楼层 |阅读模式
    出处http://rolinli.cc/Draw-beautiful-charts-with-HighchartsJs-2/dashStyle
    官方DEMO
    highcharts的line样式非常多,而且不是像css那样定义的,不多说,见文档
    xAxis与yAxis
    x轴和y轴的设置是相对复杂的一类,因为太多东东可以控制了。比如:
    • 主轴:包括lineWidth,lineColor,还有offset,min,max,minPadding,maxPadding
    • 基准线:包括gridLineColor,gridLineDashStyle,gridLineWidth,gridZIndex,alternateGridColor
    • 轴上的每个小节点:包括tickColor,tickInterval,tickLength,tickPixelInterval,tickPosition,tickPositioner,tickPositions,tickWidth,tickmarkPlacement,以及minTickInterval,还有startOnTick,endOnTick
    • 次轴:minor开头的配置,这个用得比较少,指的是次轴的设置,其设置内容类似主轴

    其中width,color,offset,zIndex什么的都是简单的样式控制。
    讲一下比较难理解的 tick 的部分:
    • tickWidth, tickLength:
      这两个分别是小节点那个方块的长和宽,默认是一个针样子,即10px长,1px宽
    • tickInterval, tickPixelInterval, minTickInterval:
      节点之间的间隔,多种计算方式,第一种tickInterval是普通的依照轴所代表的值来计算,比如时间轴就是毫秒,那么设置为1000 * 60 * 60 就是一小时为单位,实际使用中建议不这样用,因为大多数时候,我们只是希望它至少是小时或天,如果间隔过大,希望是自动使用更高的间隔,所以可以设置minTickInterval,另外在逻辑类是轴上,可以使用阶乘的方式计算间隔,详情见文档
    • tickPixelInterval:
      比较容易理解,就是像素距离,不设置tickInterval情况下可以生效,这样保证无论数据什么样,节点的距离都是一样的,数值间隔会被自动计算。
    • tickmarkPlacement:
      是种类的轴用的(例如苹果,梨,香蕉这种轴),设置节点是在每一个分类的中间位置还是每两个分类之间位置
    • tickPosition:
      是说节点在主轴内侧还是外侧
    • tickPositioner, tickPositions:
      这两个和tickInterval那三个有关系,当希望不是以固定的间隔或逻辑间隔来设置每个节点的时候,可以完全自定义节点值,其中tickPositions是直接设置一个数值数组,数组中的值才有对应节点,而tickPositioner是函数,同样返回一个数组,函数优点在于上下文里可以读取很多内容,方便用于计算,比如dataMin,dataMax等
    • startOnTick, endOnTick:
      是否显示第一个节点和最后一个节点

    DEMO
    现在,我把上面学的东东都用一遍吧! DEMO»


    本帖被以下淘专辑推荐:

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表