关于highcharts的一些小技术点

最新推荐文章于 2023-12-12 13:22:39 发布

qq_30913217

最新推荐文章于 2023-12-12 13:22:39 发布

阅读量296

点赞数

文章标签： jQuery highcharts

本文链接：https://blog.csdn.net/qq_30913217/article/details/52984821

版权

面向对象方法生成一个Highcharts对象，并输出到id为container的div对象上边

JS文件

    var chart = new Highcharts.Chart({
       chart : {
           // 将报表对象渲染到层上默认为div的id名称 id="container"
           renderTo : 'container',
       },

       // 标题
       title : {
           text : '商品材料统计走势图',
       },

       credits : {
           enabled : false,
       },

       // 小标题
       subtitle : {
           text : '请选择月份、类型和品色',
       },

       xAxis : {
           // 设置X轴颜色填充
           alternateGridColor : '#FDFFD5',
           // X轴的刻度标准
           categories : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
                   '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
                   '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
                   '31', '32' ],

       },

       yAxis : {
           /* 设置Y轴线的颜色 */
           title : {
               text : '材料数量(m)',
           },
           gridLineColor : '#197F07'

       },

       series : [
               {
                   //标题名称
                   name : '耗材量',

                   // 线中间如果为null属性，则将两端的线连接
                   connectNulls : true,

                   // 设定报表对象的初始数据
                   data : loadValueArray,

                   //鼠标按钮放上显示的数据
                   tooltip : {
                       headerFormat : '{point.key}日<br/>',
                       pointFormat : "材料量:{point.y}m"
                   }

               },
               {
                   name : '库存量',
                   connectNulls : true,
                   data :loadValueArray,
                   tooltip : {
                       headerFormat : '{point.key}日<br/>',
                       pointFormat : "材料量:{point.y}m"
                   }

               },
               {

                   name : '警戒值',
                   color : 'red',
                   connectNulls : true,
                   data : loadValueArray,
                   tooltip : {

                       pointFormat : "警戒值:{point.y}m"
                   }

               }

       ],

   });