highcharts图表 line_basic封装

$(function () {
    var renderTo = "container_1";
    var series = [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5]}];
    var categories = ['一周', '二周', '三周', '四周', '五周', '六周', '七周', '八周'];
    var _line_basic = new chart_line_basic(renderTo, series, categories, false);
    _line_basic.formatterTooltip = function () { return this.x + ': ' + this.y + '%'; }
    _line_basic.showChart();

});

line_basic.js
HC_line_basic.jsHC_line_basic.jsHC_line_basic.js
function chart_line_basic(renderTo, series, categories, legendEnabled) {
    this.renderTo = renderTo;
    this.series = series;
    this.categories = categories;
    this.legendEnabled = legendEnabled;
}
chart_line_basic.prototype.formatterTooltip = function () { }
chart_line_basic.prototype.showChart = function () {
    var chart;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: this.renderTo,
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: ' ',
            x: -20 //center
        },
        subtitle: {
            text: ' ',
            x: -20
        },
        xAxis: {
            categories: this.categories
        },
        yAxis: {
            title: {
                text: ' '
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: this.formatterTooltip
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0,
            enabled: this.legendEnabled
        },
        series: this.series
    });
};

 

application.js


 

你可能感兴趣的:(highcharts图表 line_basic封装)