zoukankan      html  css  js  c++  java
  • highcharts柱状图含有正负柱设置不同颜色的方法

    最近做移动端的数据图,需要设置正负两种柱子,以及正负两种柱子显示不同的颜色,查看API,无奈API太庞大了,求问谷歌,伟大的谷歌给我了正确的答案

    I have a working chart with negative values. I would like to have columns with positive values to be blue and columsn with negative vlaues to be red.

    Here is what I have:

    翻译:我有一个负的值的工作表。我想有柱的正面价值观是蓝色和columsn负值是。

    这里是我的:

    代码就不贴了

    下面是答案:

    Since you are not describing how you are populating modafor your data series here are some generalities:

    • The series.data.color item is accessible. So, when building the series.data up you could calculate what color it should be based on the value.
    • You are only allowing one color in your list: colors: [ 'blue' ],
    • Another option is to set the negativeColor.

    既然你不能描述你是如何填充moda你的数据系列,这里有一些共性:

    • series.data.color项目可。所以,当建筑series.data你能计算出它应该基于价值什么颜色。
    • 你是只允许在您的名单中,一种颜色:colors: [ 'blue' ],
    • 另一个选项是设置negativeColor

    引用地址:http://4byte.cn/question/258586/highcharts-column-with-negative-values-column-color.html

    API地址:http://www.hcharts.cn/api/index.php#plotOptions.column.negativeColor

    demo地址:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/arearange-negativecolor/

    http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-negative-color/

    //日收益率
        (function () {
            if($("#everyday_charts").length==0){
                return false;
            }
            $('#everyday_charts').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: ['09-14', '09-15', '09-16', '09-17', '09-18', '09-19', '09-20', '09-21', '09-22', '09-23', '09-24', '09-25','09-26', '09-27', '09-28', '09-29', '09-30','10-01','10-02','10-03','10-04','10-05','10-06','10-07','10-08','10-09','10-10','10-11','10-12','10-13','10-14'],
                    labels: {
                        step: 5 //设置X轴间隔多少显示
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                series: [{
                    color:'#ff2c55',
                    negativeColor: '#00ce9b',//就是这个属性设置负值的颜色
                    data: [15,12,-10,15,12,15,12,-10,20,12,-5,-10,20,12,-5,20,15,12,-10,20,12,-5,15,-5,12,-5,15,12,12,-5]
                }],
                credits: {
                    enabled: false
                },
                legend:{
                    enabled: false
                },
                credits:{//版权信息
                    enabled:false
                },
                tooltip:{//数据点提示框
                    enabled:false
                }
            });
    
        })();
  • 相关阅读:
    Java+seleinum+testng框架UI自动化测试环境搭建--第一节
    linux常用命令
    Linux下定时任务的查看及取消
    WampServer环境安装
    Airtest断言方法
    Pycharm创建模板头部默认
    QPS/TPS简介
    简易全文搜索引擎设计
    如何在linux下检测内存泄漏
    箱线图(boxplot)简介与举例
  • 原文地址:https://www.cnblogs.com/sanfense/p/4916281.html
Copyright © 2011-2022 走看看