Question

我有调用google工作表数据的JScript代码，但是虽然此代码可以访问JSFiddle上的数据，但它不会通过本地客户端访问数据。检查以前的答案，我检查了我在DOM处理程序中包装了我的js代码，我想我已经适当地加载了库。事实上，元素加载，因为某种原因没有数据。

这是jsfiddle。

这是我的HTML正文

<!doctype html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script> 
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/data.src.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="js/custom.js"></script>
<meta charset="utf-8"/>
<title>Waste Water Management Design Exercise</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>

<body>

<div id="masterDiv">
<h2>Design Objectives</h2> 
<div id="tabs">
    <ul>
        <li>
            <a href="#tab-1">Line Graph</a>
        </li>
        <li>
            <a href="#tab-2">Bar Graph</a>    
        </li>
        <li>
            <a href="#tab-3">Objective View</a>
        </li>
    </ul>
    <div id="tab-1">
        <div id="objective_line">    
        </div>
    </div>
    <div id="tab-2">
        <div id="objective_bar"></div>
    </div>
    <div id="tab-3">
        <div id="obj_view"></div>    
    </div>
    </div>
<br>
<br>
<div class="selector">
<div id="exiting" class="category on">
    <h3>Design Cost Breakdown</h3>
</div>
<div id="entering" class="category off">
 <h3>Parameter Variations</h3>
</div>  
</div>    
  <div id="containerBar" style="min-width: 310px; height: 450px; margin: 0 auto"></div>
  <div id="table_div" style="min-width: 310px; height: 450px; margin: 0 auto">
</div>
</div>
</body>
</html>

这是我的JScript代码

$(document).ready(function() {
$("#table_div").hide();


$("#entering").click(function(){
$("#containerBar").hide();
$("#table_div").show();
$(this).removeClass("off").addClass("on");
$("#exiting").removeClass("on").addClass("off");
}); 

$("#exiting").click(function(){
$("#table_div").hide();
$("#containerBar").show();
$(this).removeClass("off").addClass("on");
$("#entering").removeClass("on").addClass("off");
});

$(function() {
$( "#tabs" ).tabs();
} );

$(function () {

Highcharts.chart('obj_view', {

    chart: {
        type: 'column'
},

    title: {
        text: 'Objective Breakdown'
},


    xAxis: {
        tickmarkPlacement: 'on',
        title: {
            text: 'Design Iterations'
        }
},

    yAxis:{
        min: 0,
        title: {
            text: 'Cost in $ Millions',
            align: 'low'
            },
        labels: {
            overflow: 'justify'
            }
        },

tooltip: {
    valueSuffix: ' millions',
    shared: true
},

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    floating: true
}, 

data: {
    googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
    switchRowsAndColumns: true
}

})
});


$(function () {

Highcharts.chart('objective_line', {

    chart: {
        type: 'line'
},

    title: {
        text: 'Overall Design Objective Comparisons'
},


    xAxis: {
        tickmarkPlacement: 'on',
        title: {
            text: 'Design Objectives'
        }
},

    yAxis:{
        min: 0,
        title: {
            text: 'Cost in $ Millions',
            align: 'low'
            },
        labels: {
            overflow: 'justify'
            }
        },

tooltip: {
    valueSuffix: ' millions',
    shared: true
},

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    floating: true
}, 

data: {
    googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q'
}

})
});

$(function () {

Highcharts.chart('objective_bar', {

    chart: {
        type: 'bar'
},

    title: {
        text: 'Overall Design Objective Comparisons'
},


    xAxis: {
        tickmarkPlacement: 'on',
        title: {
            text: 'Design Objectives'
        }
},

    yAxis:{
        min: 0,
        title: {
            text: 'Cost in $ Millions',
            align: 'low'
            },
        labels: {
            overflow: 'justify'
            }
        },

tooltip: {
    valueSuffix: ' millions',
    shared: true
},

plotOptions: {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 20,
    floating: true
}, 

data: {
    googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q'
}

})
});

$(function () {
Highcharts.chart('containerBar', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Design Cost Breakdown'
    },
    yAxis: {
        min: 0,
        title: {
            text: '$ 1M'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: 0,
        verticalAlign: 'middle',
        y: 30,
        floating: false,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false,
        width: 180
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },

    data:{
        googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
        googleSpreadsheetWorksheet: 2
    }

});
});

$(function () {
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Parameter');
    data.addColumn('string', 'Design 1');
    data.addColumn('string', 'Design 2');
    data.addColumn('string', 'Design 3');
    data.addRows([
      ['Waste Water Piping', 'No', 'Yes', 'Yes'],
      ['Waste Water Storage', 'Yes', 'No', 'Yes'],
      ['Waste Water Reuse', 'Yes', 'Yes', 'No'],
      ['Pipe Size', 'N/A', 'Medium', 'Small'],
      ['Storage Container Size', 'Medium', 'N/A', 'Small'],
      ['Waste Water Reuse Proportion', '30%', '40%', 'N/A']
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, {showRowNumber: false, width: '80%', height: '100%'});
  }
});
});

Answer 1

这是由于安全功能＆＃39;在浏览器中：

https://www.thegeekstuff.com/2016/09/disable-same-origin-policy/

Disable same origin policy in Chrome

您可以禁用安全功能，也可以使用本地Web服务器。这个很容易使用： https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

从谷歌工作表获取数据适用于jsfiddle但不适用于本地客户端

1 个答案: