如何使我的js文件中的var动态化 [英] How can I make the var in my js file dynamic
本文介绍了如何使我的js文件中的var动态化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，Iam在等待一些帮助的问题附近遇到了问题。
我在html5画布上使用html如下：
Hello every one Iam struck near a problem waiting for some one help.
Iam having html with with the html5 canvas as follows:
<pre lang="HTML">
<div class="widget-body">
<div class="chartcontainer">
<canvas id="doughnut" height="300"></canvas>
</div>
</div>
<script src="assets/js/charts/chartjs/chartjs-init.js"></script>
<script>
$(window).bind("load", function () {
/*Sets Themed Colors Based on Themes*/
thirty = 30;
fourty = 40;
fifty = 50;
sixty = 60;
seventy = 70;
themeprimary = getThemeColorFromCss('themeprimary');
themesecondary = getThemeColorFromCss('themesecondary');
themethirdcolor = getThemeColorFromCss('themethirdcolor');
themefourthcolor = getThemeColorFromCss('themefourthcolor');
themefifthcolor = getThemeColorFromCss('themefifthcolor');
InitiateChartJS.init();
});
</script>
我的js文件如下：
My js file is as follows:
var gridbordercolor = "#eee";
var InitiateChartJS = function () {
return {
init: function () {
var doughnutData = [
{
value: thirty,
color: themeprimary
},
{
value: fourty,
color: themesecondary
},
{
value: fifty,
color: themethirdcolor
},
{
value: sixty,
color: themefourthcolor
},
{
value: seventy,
color: themefifthcolor
}
];
var lineChartData = {
labels: ["", "", "", "", "", "", ""],
datasets: [
{
fillColor: "rgba(93, 178, 255,.4)",
strokeColor: "rgba(93, 178, 255,.7)",
pointColor: "rgba(93, 178, 255,.7)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(215, 61, 50,.4)",
strokeColor: "rgba(215, 61, 50,.6)",
pointColor: "rgba(215, 61, 50,.6)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var pieData = [
{
value: 30,
color: themeprimary
},
{
value: 50,
color: themesecondary
},
{
value: 100,
color: themefourthcolor
}
];
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: themeprimary,
strokeColor: themeprimary,
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: themethirdcolor,
strokeColor: themethirdcolor,
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var chartData = [
{
value: Math.random(),
color: themeprimary
},
{
value: Math.random(),
color: themesecondary
},
{
value: Math.random(),
color: themethirdcolor
},
{
value: Math.random(),
color: themefourthcolor
},
{
value: Math.random(),
color: themefifthcolor
},
{
value: Math.random(),
color: "#ed4e2a"
}
];
var radarChartData = {
labels: ["", "", "", "", "", "", ""],
datasets: [
{
fillColor: "rgba(140,196,116,0.5)",
strokeColor: "rgba(140,196,116,.7)",
pointColor: "rgba(140,196,116,.7)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(215,61,50,0.5)",
strokeColor: "rgba(215,61,50,.7)",
pointColor: "rgba(215,61,50,.7)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
}
};
} ();
我需要使其成为动态的doughnutData想要将自己的值传递给它。< br $> b $ b
我尝试过：
以下是我实施的内容请看看它是不行的
The doughnutData i need to make it as dynamic want to pass my own values to it.
What I have tried:
The below is what i have implemented please hava a look it is not working
var doughnutData;
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
function OnSuccess(response) {
var customers = response.d;
var doit = '[ ';
$(customers).each(function () {
doit = doit + ' { value : ' + this.value + ', color :"#ed4e2a" }, '
});
doit = doit + ' ]';
alert(doit);
doughnutData = JSON.parse(doit);
}
推荐答案
（ window ） .bind（ load， function （）{
/ * 根据主题设置主题颜色* /
30 = 30 ;
fourty = 40 ;
50 = < span class =code-digit> 50 ;
sixty = 60 ;
seventy = 70 ;
themeprimary = getThemeColorFromCss（' themeprimary'）;
themesecondary = getThemeColorFromCss（' themesecondary'）;
themethirdco lor = getThemeColorFromCss（' themethirdcolor'）;
themefourthcolor = getThemeColorFromCss（' themefourthcolor'）;
themefifthcolor = getThemeColorFromCss（' themefifthcolor'）;
InitiateChartJS.init（）;
}）;
< / script>
(window).bind("load", function () { /*Sets Themed Colors Based on Themes*/ thirty = 30; fourty = 40; fifty = 50; sixty = 60; seventy = 70; themeprimary = getThemeColorFromCss('themeprimary'); themesecondary = getThemeColorFromCss('themesecondary'); themethirdcolor = getThemeColorFromCss('themethirdcolor'); themefourthcolor = getThemeColorFromCss('themefourthcolor'); themefifthcolor = getThemeColorFromCss('themefifthcolor'); InitiateChartJS.init(); }); </script>
我的js文件如下：
My js file is as follows:
var gridbordercolor = "#eee";
var InitiateChartJS = function () {
return {
init: function () {
var doughnutData = [
{
value: thirty,
color: themeprimary
},
{
value: fourty,
color: themesecondary
},
{
value: fifty,
color: themethirdcolor
},
{
value: sixty,
color: themefourthcolor
},
{
value: seventy,
color: themefifthcolor
}
];
var lineChartData = {
labels: ["", "", "", "", "", "", ""],
datasets: [
{
fillColor: "rgba(93, 178, 255,.4)",
strokeColor: "rgba(93, 178, 255,.7)",
pointColor: "rgba(93, 178, 255,.7)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(215, 61, 50,.4)",
strokeColor: "rgba(215, 61, 50,.6)",
pointColor: "rgba(215, 61, 50,.6)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var pieData = [
{
value: 30,
color: themeprimary
},
{
value: 50,
color: themesecondary
},
{
value: 100,
color: themefourthcolor
}
];
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: themeprimary,
strokeColor: themeprimary,
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: themethirdcolor,
strokeColor: themethirdcolor,
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
var chartData = [
{
value: Math.random(),
color: themeprimary
},
{
value: Math.random(),
color: themesecondary
},
{
value: Math.random(),
color: themethirdcolor
},
{
value: Math.random(),
color: themefourthcolor
},
{
value: Math.random(),
color: themefifthcolor
},
{
value: Math.random(),
color: "#ed4e2a"
}
];
var radarChartData = {
labels: ["", "", "", "", "", "", ""],
datasets: [
{
fillColor: "rgba(140,196,116,0.5)",
strokeColor: "rgba(140,196,116,.7)",
pointColor: "rgba(140,196,116,.7)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(215,61,50,0.5)",
strokeColor: "rgba(215,61,50,.7)",
pointColor: "rgba(215,61,50,.7)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData);
new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData);
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
}
};
} ();
我需要使其成为动态的doughnutData想要将自己的值传递给它。< br $> b $ b
我尝试过：
以下是我实施的内容请看看它是不行的
The doughnutData i need to make it as dynamic want to pass my own values to it.
What I have tried:
The below is what i have implemented please hava a look it is not working
var doughnutData;
.ajax（{
type： POST ，
url： CS.aspx / GetCustomers，
数据：' {}'，
contentType： application / json; charset = utf-8，
dataType： json，
成功：OnSuc cess，
失败： function （响应）{
alert（response.d）;
}，
错误： function （响应）{
alert（response.d）;
}
}）;
function OnSuccess（响应）{
var customers = response .D;
var doit = ' [';
.ajax({ type: "POST", url: "CS.aspx/GetCustomers", data: '{}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); function OnSuccess(response) { var customers = response.d; var doit = '[ ';
(customers).each(function () {
doit = doit + ' { value : ' + this.value + ', color :\"#ed4e2a\" }, '
});
doit = doit + ' ]';
alert(doit);
doughnutData = JSON.parse(doit);
}
(customers).each(function () { doit = doit + ' { value : ' + this.value + ', color :"#ed4e2a" }, ' }); doit = doit + ' ]'; alert(doit); doughnutData = JSON.parse(doit); }
这篇关于如何使我的js文件中的var动态化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
