Implementing highcharts in OOP Javascript

问题:

I want to implement highcharts in full object oriented way and fully configurable. So that I can just call the object and pass in the values for the options the chart should display.

So I started with creating a function like: highchartclass , please look at the code below:

$(function () {
    var highchartclass = {
        create: function (toId, type) {
            return new Highcharts.Chart({
                chart: {
                    renderTo: toId,
                    type: type,
                    backgroundColor: 'transparent'
                },
                legend: {},
                subtitle: {
                    text: ''
                },
                xAxis: {},
                yAxis: [],
                tooltip: {},
                plotOptions: {},
                series: []
            });
        }
    };
    var chartObj = highchartclass.create('container', 'area');
    chartObj.setTitle({
        text: 'CPM IMPS SPEND BY TIME'
    });

    var chartOptions = Highcharts.getOptions();
    console.log("======Present chartOptions==========");
    console.log(chartObj.options);

    chartObj.options.plotOptions['area'] = {
        pointStart: 1,
        marker: {
            enabled: false,
            symbol: 'circle',
            radius: 1,

            states: {
                hover: {
                    enabled: true
                }
            }
        }
    };
    chartObj.options['xAxis'] = {
        allowDecimals: false,
        labels: {
            formatter: function () {
                return 'Week ' + this.value; // clean, unformatted number for year
            }
        }
    };

    chartObj.options['yAxis'] = [{

        lineWidth: 1,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {

            }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0
    }, {

        lineWidth: 1,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {

            }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        linkedTo: 0,
        opposite: true
    }];
    chartObj.options.tooltip = {
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        useHTML: true,
        style: {
            padding: 0
        },
        pointFormat: '<p id="p{series.name}"><b>${point.y:,.0f}</b></p>',
        shared: true,
        crosshairs: true
    };
    chartObj.options.series = [{
        name: 'CPM',
        data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640],
        color: 'rgb(87, 188, 0)'
    }, {
        name: 'IMPS',
        data: [null, null, null, null, null, null, null, null, null, null,
            5, 25, 50, 120, 150, 100, 126, 160, 269, 60, 165, 471, 322
        ],
        color: 'rgb(213, 156, 72)'
    }, {
        name: 'SPEND',
        data: [null, null, null, null, null, null, null, null, null, null,
            50, 215, 50, 120, 150, 200, 426, 660, 150, 160, 165, 171, 50
        ],
        color: 'rgb(12, 170, 226)'


    }];


    // Highcharts.setOptions(chartObj);
    console.log("======After chartOptions==========");
    console.log(chartOptions);
    console.log("======Chart Object==========");
    console.log(chartObj);

});

Fiddle Demo OOP

I need to create a OOP kind of highchart, so by calling the getter or setter methods, the chart should be drawn,

Need to know, why the OOP kind of chart is not drawn, and also need to improvement on that.

The Normal way of the same chart looks like:

Actual chart without OOP