彩票走势图

Highcharts基础教程(五):颜色(colors)

转帖|使用教程|编辑:郑恭琳|2016-07-12 11:23:56.000|阅读 6104 次

概述:本节详细说明了图标中线条颜色、文字颜色等和颜色相关的内容。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

一、数据列颜色

Highcharts 中数据列的颜色是通过 colors 来指定的,colors 是个颜色值数组,默认是:

colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', 
        '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'] 

共有10个默认颜色,你可以修改颜色值或增加颜色个数来自定义图表数据列颜色。

数据列调用颜色的方式是第 n 个数据列使用第 n 个颜色数组里的值,当序列的数量超过颜色数组的长度,后续的序列将会从头调用。

二、柱形图的颜色

柱形图(包括柱状图、条形图等)里一组柱形颜色是一样的,很多人对此表示不理解

series: [{
  name: 'Tokyo',
  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}] 

通过代码我们知道,一组柱形是属于同一个数据列的,所以他们的颜色当然时一样的。

你可能想到下面的这种方法:

series: [{
    name: "Column series",
    data: [{
        y:49.9,
        color:"#ff0000"
    },
    // ... 省略代码
    ]
}] 

这是在上一节“数据列”中说到的颜色赋值方式,用这种方法虽然可以实现想要的效果,但是如果分别对每个数据列赋值,显然不合理。

highcharts 直接提供对柱形图同数据列设置颜色,属性是:colorByPoint

API 给出的说明是:

this option determines whether the chart should receive one color per series or one color per point. 

即 colorByPoint 决定了图表是否给每个数据列或每个点分配一个颜色,默认值是 false, 即默认是给每个数据类分配颜色, 设置为 true 则是给每个点分配颜色。

设置 colorByPoint = true 后的效果见下图:

其他图形可以用 colorByPoint

  • bar 条形图
  • column 柱状图
  • columnrange 柱状范围图
  • heatmap 热力图
  • treemap 树状图
  • waterfall 瀑布图
  • boxplot 箱线图

三、图表中文字颜色

图表中所有文字都设置字体、颜色等样式,一般是通过 style.color 来设置文字颜色的,style 里可以用的属性如下所示:

style: {
    color: '#ff0000',
    fontSize: "12px",
    fontWeight: "blod",
    fontFamily: "Courier new"
} 

Via:hcharts.cn

点击下载最新版 Highcharts

如果你想提供任何产品反馈,。

购买最新版Highcharts<>,即可拥有最新正版授权!


标签:图表

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP