使用highcharts来实现报表的展示以及打印和导出功能

来源：互联网发布：淘宝卖家售后规则编辑：程序博客网时间：2024/05/22 16:53

项目中引入highcharts
js页面引入
处理响应的参数
图表的核心代码：
$('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: '停车场停车曲线图'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['0时', '2时', '4时', '6时', '8时', '10时',
                         '12时', '14时', '16时', '18时', '20时', '22时']
        },
        yAxis: {
            title: {
                text: '数　量'
            },
            labels: {
                formatter: function () {
                    return this.value + '辆';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },exporting : {
            enabled : true,
            buttons : {
                   exportButton : {
                          menuItems: [{
                                 text: '导出PNG图片(宽度为250px)',
                                 onclick:function() {
                                        this.exportChart({
                                               width:200 //导出报表的宽度
                                        });
                                 }
                          }, {
                                 text: '导出PNG图片(宽度为800px)',
                                 onclick:function() {
                                        this.exportChart();// 800px by default
                                 }
                          },
                          null,
                          null
                          ]
                   },
                   printButton: {
                          enabled : false
                   }
            },
            filename : '停车场停车曲线图'
       },
        credits: {
            enabled: false
         },
        series: [{
           name: street,
                marker: {
                    symbol: ''
                },
                data: temp
       }]
    });
}
这里有一个问题就是下拉列表默认显示的是英文需要一个全局的设置
    Highcharts.setOptions({
        lang: {
               printChart:"打印图表",
                 downloadJPEG: "下载JPEG 图片" ,
                 downloadPDF: "下载PDF文档" ,
                 downloadPNG: "下载PNG图片" ,
                 downloadSVG: "下载SVG矢量图"
        }
    });

阅读全文

0 0