我现有项目中的Google Chart HTML页面集成不起作用

问题描述 投票:0回答:1

我有一个Google图表HTML页面,每当我单独发动它时,它都会绘制出精美的图表。页面代码如下

<!doctype html>
<html lang='en'>
   <head>
      <!-- Required meta tags -->
      <meta charset='utf-8'>
      <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
      <title>Value IQ</title>
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
      <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
      <link rel='stylesheet' href='css/style.css'>
   </head>
   <body>
      <!-- detail section start -->
    <section class='section-padding'>
        <div class='container'>
            <div class='row'>
                <div class='col-12'>
                    <div>
                        <h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
                    </div>
                </div>
            </div>
            <div class='row'>
                <div class='col-lg-12'>
                    <!-- start:: Chart card -->
                    <div class='card-blk chart-card d-flex flex-column'>
                        <div class='card flex-grow-3'>
                            <div class='card-title'>
                                <h6 class='text-center'>
                                    Customers
                                </h6>
                            </div>
                            <div class='card-content text-center'>
                                <div id='chartElement3'>

<script type='text/javascript'>

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);

function drawElement3Dashboard() {
    var data = new google.visualization.DataTable();
    data.addColumn('string','customer_profile_value');
    data.addColumn('number','Current Turnover');
    data.addColumn({type:'string', role:'annotation'});
    data.addColumn('number','Last year Turnover');
    data.addColumn({type:'string', role:'annotation'});
    data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
    var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
    var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
    'height': 300,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
    dashboard.bind(controller, colChart);
    dashboard.draw(data);
}
</script>

<div id='dashboard_div_3'>
                                        <div id='filter_div_3' style='display: none;'></div>
                                        <div id='chart_div_3'>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h6 class='card-subtitle'>
                            User: Company name
                        </h6>
                    </div>
                    <!-- end:: Chart card -->
                </div>
            </div>
            <!-- Start:: Copyright and page text -->
            <div class='row mt-auto pt-3'>
                <div class='col-12'>
                    <div class='copyright-text d-flex justify-content-between'>
                        <span>Company Name</span>
                        <span>Page 1</span>
                    </div>
                </div>
            </div>
            <!-- End:: Copyright and page text -->
        </div>
    </section>
    <!-- detail section end -->
   </body>
</html>

现在,当我将内容放置在现有项目页面之间时,尤其是在现有项目页面之间时,将不会绘制图表,并且在chrome的控制台中遇到以下错误

VM410:7 Uncaught (in promise) TypeError: google.visualization.DataTable is not a constructor
    at drawElement3Dashboard (eval at <anonymous> (jquery-1.7.2.js:614), <anonymous>:7:13)

我已经包括在内

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>

在我的项目中。

伙计,这可能是什么原因?

javascript jquery html google-visualization
1个回答
0
投票

您可以将其添加到代码中吗。

  drawDisplacementChart();
  drawDistanceChart();
© www.soinside.com 2019 - 2024. All rights reserved.