我正在使用我们的图表/图表（使用chart.js）创建一些功能，这将允许用户选择他们想要查看的时间范围。我创造了一些有用的东西;但是由于我们有4个不同的图表，我不想通过重用这些代码然后找到＆amp;来创建一个巨大的，低效的文档。更换已更换的部件。相反，我想创建一个创建一次的模板对象，然后用该图形自己的属性替换模板化/通用变量名称。
以下是我创建的代码的精简版本：
$("#engagementDaily").hide();
$("#engagementWeekly").hide();
$("#engagementMonthly").hide();
$("#engagementYearly").hide();
$("#engagementDay").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'day'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").fadeIn();
$("#engagementWeekly").hide();
$("#engagementMonthly").hide();
$("#engagementYearly").hide();
engGraph.update();
});
$("#engagementWeek").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'week'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").hide();
$("#engagementWeekly").fadeIn();
$("#engagementMonthly").hide();
$("#engagementYearly").hide();
engGraph.update();
});
$("#engagementMonth").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'month'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").hide();
$("#engagementWeekly").hide();
$("#engagementMonthly").fadeIn();
$("#engagementYearly").hide();
engGraph.update();
});
$("#engagementYear").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'year'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").hide();
$("#engagementWeekly").hide();
$("#engagementMonthly").hide();
$("#engagementYearly").fadeIn();
engGraph.update();
});
$("#engagementAutoDay").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagementAutoWeek").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagementAutoMonth").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagementAutoYear").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagement7Day").click(function(){
engGraph.options.scales.xAxes[0].time.min = sevenDays;
engGraph.options.scales.xAxes[0].time.max = latestDate;
$(this).addClass('active');
engGraph.update();
});
//Et Cetera, et cetera
理想情况下，我想把它变成一个模板，它可以存在于脚本根目录中的一个对象中，我可以用这个图表/图形的名称替换重复元素 - 就像这样：
var graphTemplate = function(currentGraph, currentGraphShort)
和
$("#" + currentGraph + "Daily").hide();
/////
[currentGraphShort].options.scales.xAxes[0].time.unit = 'day'
但我的实验没有奏效。我看过使用模板文字;但那些似乎更多用于字符串（我可以告诉我们，以及我用过的东西）;我试过创建一个像[currentGraphShort]["options"]["scales"]["xAxes[0]"]["time"]["unit"] = 'day'这样的对象也不起作用......
也许这个解决方案非常简单，我忽略了，但是我喜欢这个解决方案！
谢谢=）
编辑：
我尝试在全局根范围中添加我作为函数运行的确切代码，并在图的函数中运行它;但是它无法找到我的图表（engGraph） - 说它是未定义的。也许这也是我缺少的范围因素？
非常感谢任何帮助！
答案 0 :(得分：0)
最后我创建了一个看起来像这样的全局函数：
function graphInit(graphName, currentGraph, latestDate) {
//Date formatting
var sevenDays = moment(latestDate).subtract(7, 'days').format("YYYY-MM-DD HH:mm")
var thirtyDays = moment(latestDate).subtract(30, 'days').format("YYYY-MM-DD HH:mm")
var oneWeek = moment(latestDate).subtract(1, 'weeks').format("YYYY-MM-DD HH:mm")
var twoWeeks = moment(latestDate).subtract(2, 'weeks').format("YYYY-MM-DD HH:mm")
var fourWeeks = moment(latestDate).subtract(4, 'weeks').format("YYYY-MM-DD HH:mm")
var threeMonths = moment(latestDate).subtract(3, 'months').format("YYYY-MM-DD HH:mm")
var sixMonths = moment(latestDate).subtract(6, 'months').format("YYYY-MM-DD HH:mm")
var oneYear = moment(latestDate).subtract(1, 'years').format("YYYY-MM-DD HH:mm")
var twoYears = moment(latestDate).subtract(2, 'years').format("YYYY-MM-DD HH:mm")
//nullify the xAxes scale (Used to default to auto when switching scales)
function nullXAxes() {
currentGraph.options.scales.xAxes[0].time.min = null;
currentGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
currentGraph.update();
}
//reset the xAxes scale to specified min/max
function xAxesScale(min, max) {
currentGraph.options.scales.xAxes[0].time.min = min;
currentGraph.options.scales.xAxes[0].time.max = max;
$(this).addClass('active');
currentGraph.update();
}
//init scaling
$("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Monthly,#" + graphName + "Yearly").hide();
//left-side click parameters
$("#" + graphName + "Auto").click(function() {
currentGraph.options.scales.xAxes[0].time.unit = null;
$("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Monthly,#" + graphName + "Yearly").hide();
nullXAxes();
});
$("#" + graphName + "Day").click(function() {
currentGraph.options.scales.xAxes[0].time.unit = 'day'
$("#" + graphName + "Weekly,#" + graphName + "Monthly,#" + graphName + "Yearly").hide()
$("#" + graphName + "Daily").fadeIn();
nullXAxes();
});
$("#" + graphName + "Week").click(function() {
currentGraph.options.scales.xAxes[0].time.unit = 'week'
$("#" + graphName + "Daily,#" + graphName + "Monthly,#" + graphName + "Yearly").hide()
$("#" + graphName + "Weekly").fadeIn();
nullXAxes();
});
$("#" + graphName + "Month").click(function() {
currentGraph.options.scales.xAxes[0].time.unit = 'month'
$("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Yearly").hide()
$("#" + graphName + "Monthly").fadeIn();
nullXAxes();
});
$("#" + graphName + "Year").click(function() {
currentGraph.options.scales.xAxes[0].time.unit = 'year'
$("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Monthly").hide()
$("#" + graphName + "Yearly").fadeIn();
nullXAxes();
});
//right-side click parameters
$("#" + graphName + "AutoDay,#" + graphName + "AutoWeek,#" + graphName + "AutoMonth,#" + graphName + "AutoYear").click(function() {
nullXAxes()
});
$("#" + graphName + "7Day").click(function() {
xAxesScale(sevenDays, latestDate)
});
$("#" + graphName + "30Day").click(function() {
xAxesScale(thirtyDays, latestDate)
});
$("#" + graphName + "1Week").click(function() {
xAxesScale(oneWeek, latestDate)
});
$("#" + graphName + "2Week").click(function() {
xAxesScale(twoWeeks, latestDate)
});
$("#" + graphName + "4Week").click(function() {
xAxesScale(fourWeeks, latestDate)
});
$("#" + graphName + "3Month").click(function() {
xAxesScale(threeMonths, latestDate)
});
$("#" + graphName + "6Month").click(function() {
xAxesScale(sixMonths, latestDate)
});
$("#" + graphName + "1Year").click(function() {
xAxesScale(oneYear, latestDate)
});
$("#" + graphName + "2Year").click(function() {
xAxesScale(twoYears, latestDate)
});
};
确保在创建图形之后调用graphInit（whateverGraph，currentGraph，latestDate）的函数，并为其分配变量（currentGraph）。这样可以保存至少1/4的代码，并使其更加模块化。