Highcharts图表学习

Posted 2021-01-31 --cainiao

Highcharts相关功能设置，按钮汉化、位置调整、缩放调整

var bottomWaterPointChart = function (div, stationKey, tagKey, name,tag_name,units) {

    Highcharts.setOptions({
        lang: {
            printChart: ‘打印图表‘,
            downloadJPEG: ‘下载 JPEG 文件‘,
            downloadPDF: ‘下载 PDF   文件‘,
            downloadPNG: ‘下载 PNG  文件‘,
            downloadSVG: ‘下载 SVG  文件‘,
            downloadCSV: ‘下载 CSV  文件‘,
            downloadXLS: ‘下载 XLS   文件‘,
            viewData: ‘查看数据表格‘,
            resetZoom:‘返回‘  //将原有的功能进行汉化处理
        },
        global: {
            useUTC: false
        }

    });

    $(‘#‘ + div).highcharts({
        chart: {
            type: ‘spline‘,
            zoomType: ‘x‘,//图表缩放设置，随x缩放，随y轴缩放，随x、y一起缩放
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            resetZoomButton: {//返回按钮进行位置调整，使其位置合适
                position: {
                    align: ‘right‘, // by default
                    verticalAlign: ‘top‘, // by default
                    x: -100,
                    y: 0
                },
                relativeTo: ‘chart‘
            },
            // 取消边框和背景
            borderColor: ‘#fff‘,
            //borderWidth: 2,
            //borderRadius: 10,
            backgroundColor: null
        },
        title: {
            text: name + ‘一天曲线‘,
            style: { ‘color‘: ‘#333‘, "text-shadow": "1px 1px 1px rgba(0,0,0,0.5)" },
            margin: 1
        },
        subtitle: {
            text: ‘‘
        },
        xAxis: [{

            type: ‘datetime‘,
            tickPixelInterval: 150,
            tickColor: ‘#333‘,
            tickWidth: 1,
            //刻度间隔(1小时)
            tickInterval: 3 * 3600 * 1000,
            lineColor: ‘#333‘,
            labels: {

                style: {
                    color: ‘#333‘
                }
            },
           // opposite: true,--
            opposite: false,
            plotLines: [{ color: ‘#333‘ }]
        }],
        yAxis: [{
            labels: {
                format: ‘{value}m‘,
                style: {
                    color: ‘#333‘
                }
            },
            lineColor: ‘#FCFFC5‘, tickColor: ‘#333‘,
            title: {
                text: tag_name,
                style: {
                    color: ‘#333‘
                }
            }
        }, {
            title: {
                text: tag_name,
                style: {
                    color: ‘#333‘

                }
            },
            labels: {
                //format: ‘{value} mm‘,--
                format: ‘{value}‘+units,//++
                style: {
                    color: ‘#333‘
                }
            },
            //reversed: true,--
            reversed: false,
            lineColor: ‘#333‘, tickColor: ‘#333‘,
            opposite: true
        }],
        tooltip: {
            //shared: true
            shared: false,
            formatter: function () {
                return Highcharts.dateFormat(‘%H:%M‘, this.x) + ‘<br/><b>‘ + this.series.name + ‘</b>‘ + this.y;
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: tag_name,
            color: ‘#4572A7‘,
            type: ‘line‘,
            yAxis: 1,
            //data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: units
            }

        }]
    });
};