1
我使用我们的图表/图表（使用chart.js）创建了一些功能，这将允许用户选择他们想要查看的时间缩放比例。我创造了一些可行的东西;但由于我们有4个不同的图表，因此我不想通过重复使用此代码来创建巨大而低效的文档，然后找到代替已更改的部分的文档。相反，我想创建一次创建的模板对象，然后用该图形自己的属性替换模板/通用变量名称。创建模板并使用变量替换JS
这里是我创建的代码的精简版：
$("#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'
但我的实验没有奏效。我已经看过使用模板文字;但这些似乎更多地用于字符串（我可以说，以及从Iv'e使用的）。我试图创建一个对象，如[currentGraphShort]["options"]["scales"]["xAxes[0]"]["time"]["unit"] = 'day'，这也不起作用...
也许解决方案是非常简单的东西，我俯瞰，但我会喜欢与这一个手！
谢谢=）
编辑：
我尝试添加我跑在全球根范围的功能确切的代码，和图形的功能中运行它;但之后它无法找到我的图形（engGraph） - 说它是未定义的。也许这也是我失踪的范围的一个因素？
任何帮助，非常感谢！