在尝试调用getContext之前检查元素是否存在

此JS包含3个折线图（折线图，折线图，折线图未填充）。在尝试为其中一个图表调用getContext之前，如何检查图表是否存在？在尝试调用getContext之前检查元素是否存在

我发现这是下面的代码片断，用来检查元素是否存在，但我是新的，并且不确定如何正确替换脚本中的函数名称。

<script> 
 
if (typeof function_name == 'function') { 
 
     //function_name is a function 
 
} 
 
else 
 
{ 
 
//do not exist 
 
} 
 
</script>

//------------- Line chart -------------// 
 
\t var lineData = { 
 
\t \t labels : ["January","February","March","April","May","June","July"], 
 
\t \t datasets : [ 
 
\t \t \t { 
 
\t \t \t \t label: "PayPal", 
 
\t \t \t \t fillColor : "rgba(186,195,210,0.2)", 
 
\t \t \t \t strokeColor : "rgba(186,195,210,1)", 
 
\t \t \t \t pointColor : "rgba(186,195,210,1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "rgba(186,195,210,1)", 
 
\t \t \t \t data : [3+randNum(),5+randNum(),8+randNum(),13+randNum(),17+randNum(),21+randNum(),23+randNum()] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t label: "Credit card", 
 
\t \t \t \t fillColor : "rgba(96,177,204,0.2)", 
 
\t \t \t \t strokeColor : "rgba(96,177,204,1)", 
 
\t \t \t \t pointColor : "rgba(96,177,204,1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "rgba(96,177,204,1)", 
 
\t \t \t \t data : [randNum()-5,randNum()-2,randNum()-4,randNum()-1,randNum()-3,randNum()-2,randNum()-5] 
 
\t \t \t } 
 
\t \t ] 
 

 
\t } 
 
\t var ctx = document.getElementById("line-chartjs").getContext("2d"); 
 
\t var myLineChart = new Chart(ctx).Line(lineData, { 
 
\t \t responsive: true, 
 
\t \t scaleShowGridLines : true, 
 
    \t scaleGridLineColor : "#bfbfbf", 
 
    \t scaleGridLineWidth : 0.2, 
 
    \t bezierCurve : false, 
 
    \t //points 
 
    \t pointDot : false, 
 
    \t datasetStroke : true, 
 
    \t datasetStrokeWidth : 2, 
 
    \t datasetFill : true, 
 
    \t //animations 
 
    \t animation: true, 
 
    \t animationSteps: 60, 
 
    \t animationEasing: "easeOutQuart", 
 
    \t //scale 
 
    \t showScale: true, 
 
    \t scaleFontFamily: "'Roboto'", 
 
    \t scaleFontSize: 13, 
 
    \t scaleFontStyle: "normal", 
 
    \t scaleFontColor: "#333", 
 
    \t //tooltips 
 
    \t showTooltips: true, 
 
    \t tooltipFillColor: "#344154", 
 
    \t tooltipFontFamily: "'Roboto'", 
 
    \t tooltipFontSize: 13, 
 
    \t tooltipFontColor: "#fff", 
 
    \t tooltipYPadding: 8, 
 
    \t tooltipXPadding: 10, 
 
    \t tooltipCornerRadius: 2, 
 
    \t tooltipTitleFontFamily: "'Roboto'", 
 
\t }); 
 

 
\t //------------- Line chart with dots -------------// 
 
\t var lineDotsData = { 
 
\t \t labels : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], 
 
\t \t datasets : [ 
 
\t \t \t { 
 
\t \t \t \t label: "Suites", 
 
\t \t \t \t fillColor : "RGBA(198, 215, 233, .8)", 
 
\t \t \t \t strokeColor : "RGBA(198, 215, 233, 1)", 
 
\t \t \t \t pointColor : "RGBA(198, 215, 233, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(198, 215, 233, 1)", 
 
\t \t \t \t data : [50220,48719,55398,64298,127198,125102,173261,153901,74698,51598,44320,48720] 
 
\t \t \t }, 
 
      { 
 
\t \t \t \t label: "Multi Family", 
 
\t \t \t \t fillColor : "RGBA(105, 162, 219, .8)", 
 
\t \t \t \t strokeColor : "RGBA(105, 162, 219, 1)", 
 
\t \t \t \t pointColor : "RGBA(105, 162, 219, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(105, 162, 219, 1)", 
 
\t \t \t \t data : [49796,48296,54827,63627,126127,124131,171690,151530,74127,51127,43896,48296] 
 
\t \t \t }, 
 
      { 
 
\t \t \t \t label: "Bulk", 
 
\t \t \t \t fillColor : "RGBA(251, 203, 164, .8)", 
 
\t \t \t \t strokeColor : "RGBA(251, 203, 164, 1)", 
 
\t \t \t \t pointColor : "RGBA(251, 203, 164, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(251, 203, 164, 1)", 
 
\t \t \t \t data : [47127,45627,51627,59627,121127,119631,162190,139627,70627,47627,41227,45627] 
 
\t \t \t }, 
 
      { 
 
\t \t \t \t label: "Commercial", 
 
\t \t \t \t fillColor : "RGBA(233, 128, 35, .8)", 
 
\t \t \t \t strokeColor : "RGBA(233, 128, 35, 1)", 
 
\t \t \t \t pointColor : "RGBA(233, 128, 35, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(233, 128, 35, 1)", 
 
\t \t \t \t data : [43501,42001,48001,56001,117501,116005,158564,136001,67001,44001,37601,42001] 
 
\t \t \t }, 
 
      { 
 
\t \t \t \t label: "Single Family", 
 
\t \t \t \t fillColor : "RGBA(72, 117, 161, .8)", 
 
\t \t \t \t strokeColor : "RGBA(72, 117, 161, 1)", 
 
\t \t \t \t pointColor : "RGBA(72, 117, 161, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(72, 117, 161, 1))", 
 
\t \t \t \t data : [38001,36501,42501,48501,105501,101501,142064,121501,59501,38501,32101,36501] 
 
\t \t \t }, 
 
      { 
 
\t \t \t \t label: "Non-Revenue Water", 
 
\t \t \t \t fillColor : "RGBA(181, 181, 181, .8)", 
 
\t \t \t \t strokeColor : "RGBA(181, 181, 181, 1", 
 
\t \t \t \t pointColor : "RGBA(181, 181, 181, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(181, 181, 181, 1)", 
 
\t \t \t \t data : [24501,24501,24501,24501,24501,24501,24501,24501,24501,24501,24501,24501] 
 
\t \t \t }, 
 
      { 
 
\t \t \t \t label: "System Total", 
 
\t \t \t \t fillColor : "RGBA(68, 76, 88, 0)", 
 
\t \t \t \t strokeColor : "RGBA(68, 76, 88, 1)", 
 
\t \t \t \t pointColor : "RGBA(68, 76, 88, 1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "RGBA(68, 76, 88, 1)", \t \t \t \t 
 
\t \t \t \t data : [49123,45595,51550,62804,133871,126178,178002,161593,80090,53421,34521,40582] 
 
\t \t \t } 
 
\t \t ] 
 

 
\t } 
 
\t var ctxDots = document.getElementById("line-dots-chartjs").getContext("2d"); 
 
\t var myLineDotsChart = new Chart(ctxDots).Line(lineDotsData, { 
 
\t \t responsive: true, 
 
\t \t scaleShowGridLines : true, 
 
    \t scaleGridLineColor : "#bfbfbf", 
 
    \t scaleGridLineWidth : 0.2, 
 
    \t bezierCurve : false, 
 
    \t bezierCurveTension : 0.4, 
 
    \t //points 
 
    \t pointDot : true, 
 
    \t pointDotRadius : 2, 
 
    \t pointDotStrokeWidth : 1, 
 
    \t pointHitDetectionRadius : 20, 
 
    \t datasetStroke : true, 
 
    \t datasetStrokeWidth : 2, 
 
    \t datasetFill : true, 
 
    \t //animations 
 
    \t animation: true, 
 
    \t animationSteps: 60, 
 
    \t animationEasing: "easeOutQuart", 
 
    \t //scale 
 
    \t showScale: true, 
 
    \t scaleFontFamily: "'Roboto'", 
 
    \t scaleFontSize: 13, 
 
    \t scaleFontStyle: "normal", 
 
    \t scaleFontColor: "#333", 
 
    \t //tooltips 
 
    \t showTooltips: true, 
 
    \t tooltipFillColor: "#344154", 
 
    \t tooltipFontFamily: "'Roboto'", 
 
    \t tooltipFontSize: 13, 
 
    \t tooltipFontColor: "#fff", 
 
    \t tooltipYPadding: 8, 
 
    \t tooltipXPadding: 10, 
 
    \t tooltipCornerRadius: 2, 
 
    \t tooltipTitleFontFamily: "'Roboto'", 
 
\t }); 
 

 
\t //------------- Line chart unfilled -------------// 
 
\t var lineData1 = { 
 
\t \t labels : ["January","February","March","April","May","June","July"], 
 
\t \t datasets : [ 
 
\t \t \t { 
 
\t \t \t \t label: "PayPal", 
 
\t \t \t \t fillColor : "rgba(186,195,210,0.2)", 
 
\t \t \t \t strokeColor : "rgba(186,195,210,1)", 
 
\t \t \t \t pointColor : "rgba(186,195,210,1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#a1a1a1", 
 
\t \t \t \t pointHighlightStroke : "#fff", 
 
\t \t \t \t data : [3+randNum(),5+randNum(),8+randNum(),13+randNum(),17+randNum(),21+randNum(),23+randNum()] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t label: "Credit card", 
 
\t \t \t \t fillColor : "rgba(67,174,168,0.2)", 
 
\t \t \t \t strokeColor : "rgba(67,174,168,1)", 
 
\t \t \t \t pointColor : "rgba(67,174,168,1)", 
 
\t \t \t \t pointStrokeColor : "#fff", 
 
\t \t \t \t pointHighlightFill : "#fff", 
 
\t \t \t \t pointHighlightStroke : "rgba(67,174,168,1)", 
 
\t \t \t \t data : [randNum()-5,randNum()-2,randNum()-4,randNum()-1,randNum()-3,randNum()-2,randNum()-5] 
 
\t \t \t } 
 
\t \t ] 
 

 
\t } 
 
\t var ctx1 = document.getElementById("line-unfilled-chartjs").getContext("2d"); 
 
\t var myLineChart1 = new Chart(ctx1).Line(lineData1, { 
 
\t \t responsive: true, 
 
\t \t scaleShowGridLines : true, 
 
    \t scaleGridLineColor : "#bfbfbf", 
 
    \t scaleGridLineWidth : 0.2, 
 
    \t bezierCurve : true, 
 
    \t //points 
 
    \t pointDot : false, 
 
    \t datasetFill : false, 
 
    \t //animations 
 
    \t animation: true, 
 
    \t animationSteps: 60, 
 
    \t animationEasing: "easeOutQuart", 
 
    \t //scale 
 
    \t showScale: true, 
 
    \t scaleFontFamily: "'Roboto'", 
 
    \t scaleFontSize: 13, 
 
    \t scaleFontStyle: "normal", 
 
    \t scaleFontColor: "#333", 
 
    \t //tooltips 
 
    \t showTooltips: true, 
 
    \t tooltipFillColor: "#344154", 
 
    \t tooltipFontFamily: "'Roboto'", 
 
    \t tooltipFontSize: 13, 
 
    \t tooltipFontColor: "#fff", 
 
    \t tooltipYPadding: 8, 
 
    \t tooltipXPadding: 10, 
 
    \t tooltipCornerRadius: 2, 
 
    \t tooltipTitleFontFamily: "'Roboto'", 
 
\t });

来源

2015-04-27 Daniel Barton

请参阅本之一，以获得更好的答案：http://stackoverflow.com/help/mcve – ekuusela

@ekuusela谢谢。我可能违反了该列表中的每个建议，我的不好。努力吧！ –

见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 
}

来源

2015-04-27 19:04:16 ekuusela

你可以使用这个两个变种，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"); 
}

来源

2015-04-27 19:15:42 vasilenicusor

在尝试调用getContext之前检查元素是否存在

回答

相关问题