对于highcharts的制作步骤如下：

最新推荐文章于 2024-09-17 08:39:00 发布

木生火18624

最新推荐文章于 2024-09-17 08:39:00 发布

阅读量207

点赞数

分类专栏： charts

本文链接：https://blog.csdn.net/penghao_1/article/details/86003023

版权

charts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一个是波形图

<title>Highcharts 配置语法</title>
<!--1.创建一个 页面，引入 jQuery 和 Highcharts 库  -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!--2.为div容器设定属性  -->
<style type="text/css">
#container{
  width: 950px;
  height:600px;
  margin: auto;
 }
</style>
<!--3.写highcharts的配置文件  -->
<script type="text/javascript">
$(document).ready(function() {
 var chart;

   $('#container').highcharts({
     chart:{
    //  type: 'column',//把这个放上来就是柱形图，去掉就是波形图  低于0度就是在下面的，高于0度就是在上面的
    },
    title:{
     text:'月平均气温'
    },
    subtitle:{
           text:'副标题'
    },
    xAxis:{
     categories: ['一月', '二月', '三月', '四月', '五月', '六月'
                  ,'七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis:{
     title: {
            text: '度数 (\xB0C)'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
         }]  
    } ,
    tootip:{
     valueSuffix: '\xB0C'
    },
    legend:{
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'middle',
         borderWidth: 0
       },
       series:[
               {
                name: '东京',
                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: '纽约',
                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: '柏林',
                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: '伦敦',
                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]
             }
            ]
   
   });
 
   
 });
</script>
</head>
<body>
<!--2.创建一个div容器  -->
<div id="container">

</div>

<!-- 1.引入 jQuery 库 -->
<script type="text/javascript" src="js/highcharts.js"></script>
</body>
</html>


也可以写成这样的


<title>Highcharts 配置语法</title>
<!--1.创建一个 页面，引入 jQuery 和 Highcharts 库  -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!--2.为div容器设定属性  -->
<style type="text/css">
#container{
  width: 550px;
  height:400px;
  margin: auto;
 }
</style>
<!--3.写highcharts的配置文件  -->
<script type="text/javascript">
$(document).ready(function() {
 
 $.ajax({
  //发送请求获取后台数据
 });
 /*    var chart={
      type: 'column'//把这个加上就是变为柱形图的啦
    } */
 
 /* 标题 */
    var title = {
        text: '月平均气温'  
    };
 /* 副标题 */
    var subtitle = {
         text: 'Source: runoob.com'
    };
 /* X轴  */
    var xAxis = {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月'
               ,'七月', '八月', '九月', '十月', '十一月', '十二月']
    };
 /* Y轴 */
    var yAxis = {
       title: {
          text: 'Temperature (\xB0C)'
       },
       plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
       }]
    };  
 /* 提示信息 */
    var tooltip = {
       valueSuffix: '\xB0C'
    }
 /* 展示方式，配置图表向右对齐 */
    var legend = {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'middle',
       borderWidth: 0
    };
 /* 在对应的坐标上显示坐标的数值 */
      var plotOptions = {
         line: {
            dataLabels: {
               enabled: true
            },  
            enableMouseTracking: false
         }
      };
 /* 数据 */
 /* 配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。 */
    var series =  [
       {
          name: '东京',
          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: '纽约',
          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: '柏林',
          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: '伦敦',
          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]
       }
    ];

    var json = {};

 //   json.chart=chart;
    json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.tooltip = tooltip;
    json.legend = legend;
    json.series = series;
   // json.plotOptions=plotOptions;//这个就是在对应的位置上显示坐标的
    $('#container').highcharts(json);
 });
</script>
</head>
<body>
<!--2.创建一个div容器  -->
<div id="container">

</div>

<!-- 1.引入 jQuery 库 -->
<script type="text/javascript" src="js/highcharts.js"></script>
</body>
</html>