zoukankan      html  css  js  c++  java
  • highmaps如何自定义 区间的颜色刻度

    https://api.highcharts.com/highmaps/colorAxis.dataClassColor

    http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/coloraxis/dataclasscolor/

     https://api.highcharts.com/highmaps/colors

     、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

    LEGACY

    In Highcharts 3.x, the default colors were:

    colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
        '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
    、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、


    // Load the data from a Google Spreadsheet
    // https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
    Highcharts.data({


    googleSpreadsheetKey: '0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc',

    // custom handler when the spreadsheet is parsed
    parsed: function (columns) {

    // Read the columns into the data array
    var data = [];
    $.each(columns[0], function (i, code) {
    data.push({
    code: code.toUpperCase(),
    value: parseFloat(columns[2][i]),
    name: columns[1][i]
    });
    });


    // Initiate the chart
    Highcharts.mapChart('container', {
    chart: {
    borderWidth: 1
    },

    colors: ['rgba(64,19,117,0.05)', 'rgba(64,19,117,0.2)', 'rgba(64,19,117,0.4)',
    'rgba(64,19,117,0.5)', 'rgba(64,19,117,0.6)', 'rgba(64,19,117,0.8)', 'rgba(64,19,117,1)'],

    title: {
    text: 'Data classes with categorized colors'
    },

    mapNavigation: {
    enabled: true
    },

    legend: {
    title: {
    text: 'Individuals per km²'
    },
    align: 'left',
    verticalAlign: 'bottom',
    floating: true,
    layout: 'vertical',
    valueDecimals: 0,
    backgroundColor: 'rgba(255,255,255,0.9)',
    symbolRadius: 0,
    symbolHeight: 14
    },

    colorAxis: {
    dataClassColor: 'category',
    dataClasses: [{
    to: 3
    }, {
    from: 3,
    to: 10
    }, {
    from: 10,
    to: 30
    }, {
    from: 30,
    to: 100
    }, {
    from: 100,
    to: 300
    }, {
    from: 300,
    to: 1000
    }, {
    from: 1000
    }]
    },

    series: [{
    data: data,
    mapData: Highcharts.maps['custom/world'],
    joinBy: ['iso-a2', 'code'],
    name: 'Population density',
    states: {
    hover: {
    borderColor: '#303030',
    borderWidth: 2
    }
    },
    tooltip: {
    valueSuffix: '/km²'
    }
    }]
    });
    }
    });

  • 相关阅读:
    java学习笔记07-循环
    java学习笔记06-条件语句
    java学习笔记05-运算符
    java学习笔记04-基本数据类型
    java学习笔记03-基本语法
    java学习笔记02-Eclipse IDE配置
    java学习笔记01-环境配置
    Jmeter学习笔记03-元件作用域及执行顺序
    JMeter学习笔记02-基础介绍
    [luogu3369/bzoj3224]普通平衡树(splay模板、平衡树初探)
  • 原文地址:https://www.cnblogs.com/YuyuanNo1/p/9627735.html
Copyright © 2011-2022 走看看