highchart图表 | 改变图表颜色

highchart默认颜色:



加上如下代码即可:

colors:[
            '#000000',//黑
            '#FF0000',//红
            '#00FF00',//绿
            '#0000FF',//蓝
            '#FFFF00',//黄
            '#FF00FF',//紫
            '#FFFFFF',//紫
          ],


完整代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <script src="jquery-1.10.2.min.js"></script>
<script src="highcharts.js"></script>   
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
<script>  
  
// Create the chart  
$(function () {
    $('#container').highcharts({
    chart: {  
        type: 'column', 
    },  
    title: {  
        text: 'colum'  
    },  
    colors:[
            '#000000',//黑
            '#FF0000',//红
            '#00FF00',//绿
            '#0000FF',//蓝
            '#FFFF00',//黄
            '#FF00FF',//紫
            '#FFFFFF',//紫
          ],
    xAxis: {  
        type: 'category',
        
    },  

    legend: {  
        enabled: false  
    },  
  
    plotOptions: {  
        series: {  
            borderWidth: 0,  
            dataLabels: {  
                enabled: true  
            },  
            events:{  
            click:function(e){//点击事件  
                  
                }  
             }    
        }  
          
    },  
  
    series: [{  
        name: 'Things',  
        colorByPoint: true,  
        data: [{  
            name: 'Animals',  
            y: 5
        
        }, {  
            name: 'Fruits',  
            y: 2 
        }, {  
            name: 'Cars',  
            y: 4  
        }]  
    }], 
  
    
})
})  
  
  
      
</script>  


测试结果:


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值