此JS包含3个折线图（折线图，带圆点的折线图，未填充的折线图）。在尝试为其中一个图表调用getContext之前，如何检查图表是否存在？
我发现下面的代码片段用于检查元素是否存在，但我是新手，并且不确定如何正确替换脚本中的函数名称。
<script>
if ( typeof function_name == 'function' ) {
//function_name is a function
}
else
{
//do not exist
}
</script>
//------------- Line chart -------------//
var lineData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "PayPal",
fillColor : "rgba(186,195,210,0.2)",
strokeColor : "rgba(186,195,210,1)",
pointColor : "rgba(186,195,210,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(186,195,210,1)",
data : [3+randNum(),5+randNum(),8+randNum(),13+randNum(),17+randNum(),21+randNum(),23+randNum()]
},
{
label: "Credit card",
fillColor : "rgba(96,177,204,0.2)",
strokeColor : "rgba(96,177,204,1)",
pointColor : "rgba(96,177,204,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(96,177,204,1)",
data : [randNum()-5,randNum()-2,randNum()-4,randNum()-1,randNum()-3,randNum()-2,randNum()-5]
}
]
}
var ctx = document.getElementById("line-chartjs").getContext("2d");
var myLineChart = new Chart(ctx).Line(lineData, {
responsive: true,
scaleShowGridLines : true,
scaleGridLineColor : "#bfbfbf",
scaleGridLineWidth : 0.2,
bezierCurve : false,
//points
pointDot : false,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
//animations
animation: true,
animationSteps: 60,
animationEasing: "easeOutQuart",
//scale
showScale: true,
scaleFontFamily: "'Roboto'",
scaleFontSize: 13,
scaleFontStyle: "normal",
scaleFontColor: "#333",
//tooltips
showTooltips: true,
tooltipFillColor: "#344154",
tooltipFontFamily: "'Roboto'",
tooltipFontSize: 13,
tooltipFontColor: "#fff",
tooltipYPadding: 8,
tooltipXPadding: 10,
tooltipCornerRadius: 2,
tooltipTitleFontFamily: "'Roboto'",
});
//------------- Line chart with dots -------------//
var lineDotsData = {
labels : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
datasets : [
{
label: "Suites",
fillColor : "RGBA(198, 215, 233, .8)",
strokeColor : "RGBA(198, 215, 233, 1)",
pointColor : "RGBA(198, 215, 233, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(198, 215, 233, 1)",
data : [50220,48719,55398,64298,127198,125102,173261,153901,74698,51598,44320,48720]
},
{
label: "Multi Family",
fillColor : "RGBA(105, 162, 219, .8)",
strokeColor : "RGBA(105, 162, 219, 1)",
pointColor : "RGBA(105, 162, 219, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(105, 162, 219, 1)",
data : [49796,48296,54827,63627,126127,124131,171690,151530,74127,51127,43896,48296]
},
{
label: "Bulk",
fillColor : "RGBA(251, 203, 164, .8)",
strokeColor : "RGBA(251, 203, 164, 1)",
pointColor : "RGBA(251, 203, 164, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(251, 203, 164, 1)",
data : [47127,45627,51627,59627,121127,119631,162190,139627,70627,47627,41227,45627]
},
{
label: "Commercial",
fillColor : "RGBA(233, 128, 35, .8)",
strokeColor : "RGBA(233, 128, 35, 1)",
pointColor : "RGBA(233, 128, 35, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(233, 128, 35, 1)",
data : [43501,42001,48001,56001,117501,116005,158564,136001,67001,44001,37601,42001]
},
{
label: "Single Family",
fillColor : "RGBA(72, 117, 161, .8)",
strokeColor : "RGBA(72, 117, 161, 1)",
pointColor : "RGBA(72, 117, 161, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(72, 117, 161, 1))",
data : [38001,36501,42501,48501,105501,101501,142064,121501,59501,38501,32101,36501]
},
{
label: "Non-Revenue Water",
fillColor : "RGBA(181, 181, 181, .8)",
strokeColor : "RGBA(181, 181, 181, 1",
pointColor : "RGBA(181, 181, 181, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(181, 181, 181, 1)",
data : [24501,24501,24501,24501,24501,24501,24501,24501,24501,24501,24501,24501]
},
{
label: "System Total",
fillColor : "RGBA(68, 76, 88, 0)",
strokeColor : "RGBA(68, 76, 88, 1)",
pointColor : "RGBA(68, 76, 88, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "RGBA(68, 76, 88, 1)",
data : [49123,45595,51550,62804,133871,126178,178002,161593,80090,53421,34521,40582]
}
]
}
var ctxDots = document.getElementById("line-dots-chartjs").getContext("2d");
var myLineDotsChart = new Chart(ctxDots).Line(lineDotsData, {
responsive: true,
scaleShowGridLines : true,
scaleGridLineColor : "#bfbfbf",
scaleGridLineWidth : 0.2,
bezierCurve : false,
bezierCurveTension : 0.4,
//points
pointDot : true,
pointDotRadius : 2,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 20,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
//animations
animation: true,
animationSteps: 60,
animationEasing: "easeOutQuart",
//scale
showScale: true,
scaleFontFamily: "'Roboto'",
scaleFontSize: 13,
scaleFontStyle: "normal",
scaleFontColor: "#333",
//tooltips
showTooltips: true,
tooltipFillColor: "#344154",
tooltipFontFamily: "'Roboto'",
tooltipFontSize: 13,
tooltipFontColor: "#fff",
tooltipYPadding: 8,
tooltipXPadding: 10,
tooltipCornerRadius: 2,
tooltipTitleFontFamily: "'Roboto'",
});
//------------- Line chart unfilled -------------//
var lineData1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "PayPal",
fillColor : "rgba(186,195,210,0.2)",
strokeColor : "rgba(186,195,210,1)",
pointColor : "rgba(186,195,210,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#a1a1a1",
pointHighlightStroke : "#fff",
data : [3+randNum(),5+randNum(),8+randNum(),13+randNum(),17+randNum(),21+randNum(),23+randNum()]
},
{
label: "Credit card",
fillColor : "rgba(67,174,168,0.2)",
strokeColor : "rgba(67,174,168,1)",
pointColor : "rgba(67,174,168,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(67,174,168,1)",
data : [randNum()-5,randNum()-2,randNum()-4,randNum()-1,randNum()-3,randNum()-2,randNum()-5]
}
]
}
var ctx1 = document.getElementById("line-unfilled-chartjs").getContext("2d");
var myLineChart1 = new Chart(ctx1).Line(lineData1, {
responsive: true,
scaleShowGridLines : true,
scaleGridLineColor : "#bfbfbf",
scaleGridLineWidth : 0.2,
bezierCurve : true,
//points
pointDot : false,
datasetFill : false,
//animations
animation: true,
animationSteps: 60,
animationEasing: "easeOutQuart",
//scale
showScale: true,
scaleFontFamily: "'Roboto'",
scaleFontSize: 13,
scaleFontStyle: "normal",
scaleFontColor: "#333",
//tooltips
showTooltips: true,
tooltipFillColor: "#344154",
tooltipFontFamily: "'Roboto'",
tooltipFontSize: 13,
tooltipFontColor: "#fff",
tooltipYPadding: 8,
tooltipXPadding: 10,
tooltipCornerRadius: 2,
tooltipTitleFontFamily: "'Roboto'",
});
答案 0 :(得分：0)
见Document.getElementById()。如果找不到具有指定ID的元素，则返回null。你可以这样做：
var chart = document.getElementById("line-unfilled-chartjs");
var ctx;
if (chart) {
ctx = chart.getContext("2d");
// do something with context
} else {
// handle no chart
}
答案 1 :(得分：0)
您可以使用这两个变体之一，javascript或jquery
// javascript
var elem = document.getElementById('line-unfilled-chartjs'),
ctx1;
if (elem !== null){
// element exist
ctx1 = elem.getContext("2d");
}
// with jquery
elem = $("#line-unfilled-chartjs");
if (elem.length !== 0)
{
// element exist
ctx1 = elem.getContext("2d");
}