highcharts报表简单应用

引用第三方插件：

      highcharts.js  //核心插件

      exporting.js  //导出报表插件

$('#inventoryImg').highcharts({ //inventoryImg 展示报表div Id
        chart: { //报表展示 X Y轴展示
            zoomType: 'xy'
        },
        title: { //报表名称
        
        },
        scrollbar://展示的报表滚动条
        {
        enabled:true
        },
        credits:{
        enabled:false
        },
        xAxis: [{
            categories: datax,//横轴展示数据dataX  必须为数组
            tickmarkPlacement:'on', //单条数据显示的位置
            style:{ //单个数据展示样式
            fontSize:'8px', 
            writingMode:'tb-rl'
            },
            labels: {
                    /*formatter: function() {
                    if(xmax == 0){
                    return this.value;
                    }else{
                    return (this.value+"").substr(0,4)+"<br/>"+(this.value+"").substr(5,6)+"<br/>"+(this.value+"").substr(8,9);
                    }
                },*/
            //去掉时间
                //enabled:false //是否展示横轴数据
            //显示几个点
            rotation:65,
            step:stepNum//设置显示几个点
            },
            crosshair: false //是否展示十字线
        }],
        yAxis: [{ // y轴展示数据
            labels: {
                format: '{value}%', //数据展示方式
            },
            title: { //纵轴标题
            text: '收益率'
            }
        }, { // Secondary yAxis
            title: {
            text: '仓位'
            },
            labels: {
                format: '{value}%',
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: { //小提示展示样式以及位置
            layout: 'vertical',
            align: 'left',
            x:70,
            verticalAlign: 'top',
            y: 50,
            floating: true,
            backgroundColor:  '#FFFFFF'
        },
        series: [{ 
            name: '仓位',
            type: 'column', //图表方式 （可选 column spline pie等）
            yAxis: 1,
            data: dataPosition,//展示的数据 必须为数组
            tooltip: {
                valueSuffix: ' %'
            }
       }, {
           name: '收益率',
           type: 'spline',
           data: dataYield,
           tooltip: {
               valueSuffix: '%'
           },
           color:'#FF3333' //图表颜色设置 
       }]
   });

效果图：

  

更多个性化请参考highcharts API ......

本文出自 “奋斗中的菜鸟……” 博客，谢绝转载！