在OOP Javascript中实现highcharts

我想以完全面向对象的方式和完全可配置的方式实现highcharts。这样我就可以调用该对象并传入图表应该显示的选项的值

因此，我开始创建一个函数，如：

highchartclass

，请查看下面的代码：

$(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);

});

$（函数（）{
var highchartclass={
创建：函数（toId，类型）{
返回新的高点图表。图表({
图表：{
renderTo:toId，
类型：类型，
背景颜色：“透明”
},
图例：{}，
副标题:{
文本：“”
},
xAxis:{}，
yAxis:[]，
工具提示：{}，
打印选项：{}，
系列：[]
});
}
};
var chartObj=highchartclass.create（'container'，'area'）；
chartObj.setTitle({
文字：“CPM小鬼按时间花费”
});
var chartOptions=Highcharts.getOptions（）；
console.log（“==========当前图表选项==============”）；
console.log（chartObj.options）；
chartObj.options.plotOptions['area']={
起点：1，
标记：{
启用：false，
符号：'圆'，
半径：1，
国家：{
悬停：{
已启用：true
}
}
}
};
chartObj.options['xAxis']={
allowDecimals:false，
标签：{
格式化程序：函数（）{
返回'Week'+this.value；//年份的干净的、未格式化的数字
}
}
};
图表对象选项['yAxis']=[{
线宽：1，
标题：{
文本：“”
},
标签：{
格式化程序：函数（）{
}
},
网格线宽：0，
minorGridLineWidth:0
}, {
线宽：1，
标题：{
文本：“”
},
标签：{
格式化程序：函数（）{
}
},
网格线宽：0，
minorGridLineWidth:0，
链接到：0，
相反：对
}];
chartObj.options.tooltip={
背景颜色：空，
边框宽度：0，
影子：错，
是的，
风格：{
填充：0
},
pointFormat:“
${point.y:，.0f}
”，
分享：是的，
十字准星：对
};
chartObj.options.series=[{
名称：“CPM”，
数据：[null，null，null，null，null，6，11，32，110，235，369，640]，
颜色：'rgb（871880）'
}, {
名称：'IMPS'，
数据：[null，null，null，null，null，null，null，null，null，null，null，null，
5, 25, 50, 120, 150, 100, 126, 160, 269, 60, 165, 471, 322
],
颜色：“rgb（21315672）”
}, {
姓名：'花费'，
数据：[null，null，null，null，null，null，null，null，null，null，null，null，
50, 215, 50, 120, 150, 200, 426, 660, 150, 160, 165, 171, 50
],
颜色：'rgb（12170226）'
}];
//Highcharts.setOptions（chartObj）；
console.log（“==========图表选项=================”）；
console.log（图表选项）；
console.log（“==========图表对象==============”）；
控制台日志（chartObj）；
});

我需要创建一个OOP类型的highchart，因此通过调用getter或setter方法，应该绘制图表

需要知道，为什么没有绘制OOP类型的图表，并且还需要对此进行改进

同一图表的正常方式如下所示：

---

通常，您应该在设置选项后初始化图表的大小，而不是试图覆盖它。换句话说，设置您需要的所有选项，然后使用这些参数调用create。@SebastianBochan，亲爱的朋友，谢谢您提供的信息，但您能否提供更多解释和至少一个小演示，希望您理解在属性上没有

手表

或任何类似内容，所以像

chartObj.options.series这样的设置不起任何作用。如果要设置任何内容，请使用API:。就像您对标题所做的那样，使用
setTitle（）
。当您想添加系列时，请使用
addSeries（）
等，并举例说明塞巴斯蒂安的想法：