此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 });
請參閱本之一,以獲得更好的答案:http://stackoverflow.com/help/mcve – ekuusela
@ekuusela謝謝。我可能違反了該列表中的每個建議,我的不好。努力吧! –