【HighChart】基础图表

将近两年，在工作内容中经常遇到图表的展示，经常遇到各种问题

从一开始的入手，复制，黏贴，各种图表类型，每个属性都需要百度

到更喜欢自行查看API文档逐一尝试属性效果

到遇到问题逐渐尝试结合各个属性表现出所需要的效果

对于扩展和重写组件方面还有待提高

每次完成一个复杂的图表，有种成就感。

但，却缺少了尝试过程的记录

遇到同样的问题，却忘了处理方式

所以，记录，加深印象，留下足迹。

从回忆当初最菜鸟的时候开始~

Highchart官网：http://www.highcharts.com/demo/area-basic

HighChart——Start on a Journey......

准备工作：下载highcharts.js（常见图表）、exporting.js（较复杂的图表才需要引用，若需要引用将特别备注）

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

1、Line (折线图)

function LineChart(id)
{
  id.highcharts({
    chart: { 
    // backgroundColor: ''//背景颜色，若为''，则默认为外部DIV颜色
   },
      credits: {
        enabled: false //去除右下方Highcats标注链接
    },
   title: {
    text: 'Monthly Average Temperature',
        x: 0, //标题的的偏移，0为居中
        style: {  //标题样式，属性如CSS
         "font-family":"Arial, Helvetica, sans-serif", 
         "color": "#000000", 
         "fontSize": "12px",
         "font-weight": "bold" }
       },
    subtitle: { //副标题，若没有则不填写
      text: 'Source: WorldClimate.com',
        x: 0 //副标题的的偏移，0为居中
      },
     colors: ['#abd84a', '#3fbce8','#78b2e9', '#f3a447',  '#f2e73d', '#4493d5', '#abd74a', '#8686ff', '#EA7DB6', '#c3cf49','#FF9900','#00CCCC','#CC99FF'],  //折线颜色，若折线比颜色数目多，则循环重复
     xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],  //X轴的值
            labels: { 
          enabled: true //X轴是否显示，默认为True
        } 
      },
      yAxis: {
        title: {
            text: 'Temperature (°C)', //Y周的标题
             style: { //Y轴标题字体样式
               "color": "#000000",  "font-weight": "bold"
             }
           },
           labels:{
             style: { //Y轴刻度字体样式
               "color": "#000000"
             }
           },
           plotLines: [{

        color:'#808080',           //线的颜色，定义为红色
        dashStyle:'solid',     //默认值，这里定义为实线
        value:20,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
        width:2                //标示线的宽度，2px
      } ]
    },
    tooltip: { //鼠标移上去显示内容设置
        valueSuffix: '°C', //在默认值后增加单位可直接用valueSuffix属性
        pointFormat: '{series.name}温度: <b>{point.y:.1f}°C </b>', //重置显示内容，X轴值（月份）会固定显示
           formatter: function () {//重置所有显示内容,包括重置X轴值（月份）的显示
            return '<b>' + this.series.name+ '</b><br/>' +
            this.x  + ': ' + this.y + '°C<br/>'  
          }
        },
    legend: {  //图例设置
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{  //折线数据
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
  });
}

 

 2、Pie (饼图)

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33
        }, {
            name: 'Chrome',
            y: 24.03,
            sliced: true,
            selected: true
        }, {
            name: 'Firefox',
            y: 10.38
        }, {
            name: 'Safari',
            y: 4.77
        }, {
            name: 'Opera',
            y: 0.91
        }, {
            name: 'Proprietary or Undetectable',
            y: 0.2
        }]
    }]
});

 3、Column (条形图)

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2012',
        data: [1052, 954, 4250, 740, 38]
    }]
});