zoukankan      html  css  js  c++  java
  • 面积图

    1.面积图

    var chart = null;
    Highcharts.setOptions({ 
      colors: ['#f37938'] 
    }); 
    $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
      chart = Highcharts.chart('container', {
        chart: {
          type:'area'
        },
        title: {
          text: ''
        },
        credits: {
          enabled: false
        },
        xAxis: {
          tickWidth:0,
          tickInterval: 20,
          // type:'datetime',
          // categories:['2018-01-11','2018-01-22'],
          formatter:function(){
            console.log(this.point);
            return this.point;
          }
        },
        tooltip: {
          enabled: false
        },
        yAxis: {
          title: {
            text: ''
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, 'rgb(255, 168, 0)'],
                [1, 'rgb(255, 255, 255)']
              ]
            },
            lineWidth: 1,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            areaspline: {
              color:'#rgba(255, 168, 0,0.2)',
              lineColor:'#ffba00',
              fillOpacity: 1
            },
            threshold: null
          },
          series: {
            marker: {
              states: {
                hover: {
                  enabled: false
                }
              }
            }
          }
        },
        series: [{
          marker: {
            radius:0,
            lineWidth:0,
            lineColor:'#f37938',
            fillColor:'#f37938',
          },
          data:['2018-01-02','2018-01-03', '2018-01-04','2018-01-05', '2018-01-06','2018-01-07', 
          '2018-01-08','2018-01-09', '2018-01-10','2018-01-11',2018-01-12','2018-01-13', '2018-01-14','2018-01-15',
          '2018-01-16','2018-01-17', '2018-01-18','2018-01-19',2018-01-20','2018-01-21',
          '2018-01-22','2018-01-23', '2018-01-24','2018-01-25']
            ['2018-01-02',6.7],
            ['2018-01-03',6.8],
            ['2018-01-04',6.9],
            ['2018-01-05',6.91],
            ['2018-01-06',6.92],
            ['2018-01-07',6.95],
            ['2018-01-08',7.0],
            ['2018-01-09',7.1],
            ['2018-01-10',7.2],
            ['2018-01-11',7.3],
            ['2018-01-12',7.4],
            ['2018-01-13',7.5],
            ['2018-01-14',7.7],
            ['2018-01-15',7.8],
            ['2018-01-16',7.9],
            ['2018-01-17',8.01],
            ['2018-01-18',8.2],
            ['2018-01-19',8.3],
            ['2018-01-20',8.5],
            ['2018-01-21',8.51],
            ['2018-01-22',8.52],
            ['2018-01-23',8.34],
            ['2018-01-24',8.4],
            ['2018-01-25',8.5]
          ]
        }]
      });
    });
  • 相关阅读:
    如何卸载VS 2017之前版本比如VS 2013、VS2015、 VS vNext?
    在SQL Server中如何进行UPDATE TOP .....ORDER BY?
    EntityFramework 6.x和EntityFramework Core插入数据探讨
    2017-2018:时间戳
    http协议进阶(六)代理
    认清性能问题
    <转>安全测试思维导图
    RESTful API浅谈
    http协议进阶(五)连接管理
    聊聊软件测试的职业规划
  • 原文地址:https://www.cnblogs.com/liuyinlei/p/9894335.html
Copyright © 2011-2022 走看看