Highcharts 中文社区

查看: 3826|回复: 7

[已解决] 基础柱状图超过某个值后改变颜色

[复制链接]
  • TA的每日心情
    奋斗
    2018-5-30 00:09
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    4

    帖子

    27

    积分

    HC 新手

    Rank: 1

    积分
    27
    发表于 2018-5-29 23:53:44 | 显示全部楼层 |阅读模式
    柱状图的值超过某个值后改颜色这是很常见的一种状况,看了半天hchart的各种配置不知道怎么配置,也没有例子,有人做过么?比如规定值为50,超过50的完成了绿色,50以下那部分红色
    QQ截图20180529235124.jpg
  • TA的每日心情
    开心
    2017-1-25 11:33
  • 签到天数: 581 天

    [LV.9]以坛为家II

    5

    主题

    793

    帖子

    1万

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    12524

    论坛元老

    发表于 2018-5-30 09:21:16 | 显示全部楼层
    设置一个threshold值,然后设置一个negativeColor,就可以了。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    奋斗
    2018-5-30 00:09
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    4

    帖子

    27

    积分

    HC 新手

    Rank: 1

    积分
    27
     楼主| 发表于 2018-5-30 10:43:02 | 显示全部楼层
    jsbome 发表于 2018-5-30 09:21
    设置一个threshold值,然后设置一个negativeColor,就可以了。

    按着你的设置跟图片的不一样,它这样设置之后从threshold指定点开始往上的一个颜色没有下面,然后小于的就往下是别的颜色,这是把整个0往上提到100了而已,不是超过变色;
    hcode里执行以下这个代码就看到了
    1. var chart = Highcharts.chart('container',{
    2.                 chart: {
    3.                                 type: 'column'
    4.                 },
    5.                 title: {
    6.                                 text: '月平均降雨量'
    7.                 },
    8.                 subtitle: {
    9.                                 text: '数据来源: WorldClimate.com'
    10.                 },
    11.                 xAxis: {
    12.                                 categories: [
    13.                                                 '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
    14.                                 ],
    15.                                 crosshair: true
    16.                 },
    17.                 yAxis: {
    18.                                 min: 0,
    19.                                 title: {
    20.                                                 text: '降雨量 (mm)'
    21.                                 }
    22.                 },
    23.                 tooltip: {
    24.                                 // head + 每个 point + footer 拼接成完整的 table
    25.                                 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    26.                                 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    27.                                 '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    28.                                 footerFormat: '</table>',
    29.                                 shared: true,
    30.                                 useHTML: true
    31.                 },
    32.                 plotOptions: {
    33.                                 column: {
    34.                                                 borderWidth: 0
    35.                                 }
    36.                 },
    37.                 series: [{
    38.                                 name: '东京',
    39.                                 data: [150, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    40.                                 threshold:100,
    41.                                 negativeColor:'red'
    42.                 }]
    43. });
    复制代码
  • TA的每日心情
    奋斗
    2018-5-30 00:09
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    4

    帖子

    27

    积分

    HC 新手

    Rank: 1

    积分
    27
     楼主| 发表于 2018-5-30 10:44:30 | 显示全部楼层
    1. var chart = Highcharts.chart('container',{
    2.                 chart: {
    3.                                 type: 'column'
    4.                 },
    5.                 title: {
    6.                                 text: '月平均降雨量'
    7.                 },
    8.                 subtitle: {
    9.                                 text: '数据来源: WorldClimate.com'
    10.                 },
    11.                 xAxis: {
    12.                                 categories: [
    13.                                                 '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
    14.                                 ],
    15.                                 crosshair: true
    16.                 },
    17.                 yAxis: {
    18.                                 min: 0,
    19.                                 title: {
    20.                                                 text: '降雨量 (mm)'
    21.                                 }
    22.                 },
    23.                 tooltip: {
    24.                                 // head + 每个 point + footer 拼接成完整的 table
    25.                                 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    26.                                 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    27.                                 '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    28.                                 footerFormat: '</table>',
    29.                                 shared: true,
    30.                                 useHTML: true
    31.                 },
    32.                 plotOptions: {
    33.                                 column: {
    34.                                                 borderWidth: 0
    35.                                 }
    36.                 },
    37.                 series: [{
    38.                                 name: '东京',
    39.                                 data: [150, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    40.                                 threshold:100,
    41.                                 negativeColor:'red'
    42.                 }]
    43. });
    复制代码


    设置threshold为100之后的效果

    设置threshold为100之后的效果
  • TA的每日心情
    奋斗
    2018-5-30 00:09
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    4

    帖子

    27

    积分

    HC 新手

    Rank: 1

    积分
    27
     楼主| 发表于 2018-5-30 14:09:55 | 显示全部楼层

    柱状图用zones的话是效果是超过指定值得抓状图都是设定的颜色
    1. var chart = Highcharts.chart('container',{
    2.                 chart: {
    3.                                 type: 'column'
    4.                 },
    5.                 title: {
    6.                                 text: '月平均降雨量'
    7.                 },
    8.                 subtitle: {
    9.                                 text: '数据来源: WorldClimate.com'
    10.                 },
    11.                 xAxis: {
    12.                                 categories: [
    13.                                                 '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
    14.                                 ],
    15.                                 crosshair: true
    16.                 },
    17.                 yAxis: {
    18.                                 min: 0,
    19.                                 title: {
    20.                                                 text: '降雨量 (mm)'
    21.                                 }
    22.                 },
    23.                 tooltip: {
    24.                                 // head + 每个 point + footer 拼接成完整的 table
    25.                                 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    26.                                 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    27.                                 '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    28.                                 footerFormat: '</table>',
    29.                                 shared: true,
    30.                                 useHTML: true
    31.                 },
    32.                 plotOptions: {
    33.                                 column: {
    34.                                                 borderWidth: 0
    35.                                 }
    36.                 },
    37.                 series: [{
    38.                                 name: '东京',
    39.                                 data: [150, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    40.                                 zones: [{
    41.                                                 value: 100,
    42.                                                 color: '#7cb5ec'
    43.                                 },{
    44.                                                 color: '#90ed7d'
    45.                                 },
    46.                                                          ]
    47.                 }]
    48. });
    复制代码

    QQ截图20180530140830.jpg
  • TA的每日心情
    无聊
    2019-8-12 09:47
  • 签到天数: 263 天

    [LV.8]以坛为家I

    30

    主题

    949

    帖子

    4578

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    4578

    最佳新人活跃会员

    QQ
    发表于 2018-5-30 16:57:25 | 显示全部楼层
    amrxjks 发表于 2018-5-30 14:09
    柱状图用zones的话是效果是超过指定值得抓状图都是设定的颜色

    看样子只能用堆叠来实现了。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    无聊
    2018-2-7 11:40
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    2

    主题

    4

    帖子

    65

    积分

    HC 新手

    Rank: 1

    积分
    65
    发表于 2019-6-27 17:11:03 | 显示全部楼层
    highstock曲线图怎么设置超过y轴某个刻度部分的曲线显示红色? 还有曲线发生突变,也就是斜率超过设定值时来点告警信息。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

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

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