如何在javascript文件中绘制图表并将其传递给html，以便显示_Javascript_Html_Charts_Google Visualization

如何在javascript文件中绘制图表并将其传递给html，以便显示

javascript html charts google-visualization

如何在javascript文件中绘制图表并将其传递给html，以便显示,javascript,html,charts,google-visualization,Javascript,Html,Charts,Google Visualization,我正在做一个项目，它使用来自python、html和javascript的flask、flask socketio。它使用从客户端获取的输入在html服务器上绘制图表。然而，我正在尝试用谷歌可视化和ChartRangeFilter制作一个图表。我不明白为什么图表不是在html上绘制的下面是我为绘制图表而编写的js代码 // load google charts library google.load("visualization", "1.1", {packages:['corechart',

我正在做一个项目，它使用来自python、html和javascript的flask、flask socketio。它使用从客户端获取的输入在html服务器上绘制图表。然而，我正在尝试用谷歌可视化和ChartRangeFilter制作一个图表。我不明白为什么图表不是在html上绘制的

下面是我为绘制图表而编写的js代码

// load google charts library
google.load("visualization", "1.1", {packages:['corechart', 'controls']});

// for percentage data
var dashboard, data, chart, options;

var i = 0;

google.setOnLoadCallback(drawChart);

/* initialize chart1 - rest, walk, fast_walk data */
function drawChart() {
    var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control',
        'options': {
        // Filter by the date axis.
        'filterColumnIndex': 0,
        'ui': {
          'chartType': 'LineChart',
          'chartOptions': {
            'chartArea': {'width': '90%'},
            'hAxis': {'baselineColor': 'none'}
          }
        }
        }
        // Initial range: 2012-02-09 to 2012-03-20.
        'state': {'range': {'start': 0 'end': 10}}
        });

    var chart = new google.visualization.ChartWrapper({
        'chartType': 'CandlestickChart',
        'containerId': 'chart',
        'options': {
        // Use the same chart area width as the control for axis alignment.
            'chartArea': {'height': '80%', 'width': '90%'},
            'hAxis': {'slantedText': false},
            'vAxis': {'viewWindow': {'min': 0, 'max': 100}},
            'legend': {'position': 'none'}
        },
    });

    var data = new google.visualization.DataTable();
    data.addColumn('count', 'Count');
    data.addColumn('percent', 'Percentage');
    data.addRow([
        '0',
        0
    ]);

    // var chart = new google.visualization.LineChart(document.getElementById('data-container'));
    // chart.draw(data, options);
    dashboard.bind(control, chart);
    dashboard.draw(data);
    // return(dashboard);
}

/* update the chart1 - percentage data */
function updateChart(percentage) {
    i = (i + 1);

    data.addRow([
        ""+i,
        percentage
    ]);

    chart.draw(data, options);
}

$(function() {
    chart = drawChart();
});


/* reset charts */
function reset(){
    i = 0;

    data = google.visualization.arrayToDataTable([
        ['Time', 'percentage'],
        ['0', 0],
    ]);

    chart = drawChart(data);
}

此外，我将有我的html显示下面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Live Graph Service</title>

    <!-- Bootstrap and libraries -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <!-- websocket code -->
    <script src="/static/js/charts.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        var sock = io.connect('http://localhost:8000');

        sock.on('draw', function(data){
          if($('#changeButton').html() == 'stop'){
            // get data
            percentage = data['percentage'];

            // updating chart (live)
            updateChart(percentage);
          }
        });

        // change mode
        $('#changeButton').on('click', function(){
          // change mode: stop -> start
          if($('#changeButton').html() == 'start'){
            $('#changeButton').html('stop');
            sock.emit('change mode', {'mode': 'start'});
          }
          // change mode: start -> stop
          else{
            $('#changeButton').html('start');
            sock.emit('change mode', {'mode': 'stop'});
          }
        });
      });
    </script>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="/" style="color: white">Live Graph Service</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
      </div>
    </div>

    <!-- padding -->
    <div style="height: 90px"></div>

    <!-- buttons -->
    <div class="btn-group" role="group" style="padding-left: 15px">
      <button class="btn btn-default btn-lg" id="changeButton">start</button>
      <button class="btn btn-default btn-lg" id="resetButton" onclick="reset()">reset</button>
    </div>
        <!-- chart - percentage -->
    <div class="container-fluid" id="dashboard">
      <div id="chart" style='width: 915px; height: 300px;'></div>
      <div id="control" style='width: 915px; height: 50px;'></div>
    </div>
  </body>
</html>

下面提供了客户机代码

import time
import random as r
from socketIO_client import SocketIO, LoggingNamespace

'''
sending data format:
    data= {
        'percentage': value
    }
'''

while True:
    with SocketIO('localhost', 8000, LoggingNamespace) as socketIO:
        # test data set

        send_data = {
            'percentage': r.random(),
        }

        # sending data set
        socketIO.emit('my event', send_data)
        time.sleep(1)

您可以在浏览器控制台中检查错误（按F12键）——这里，第一个参数应该是列类型，通常是

'string'

或

'number'

-->

data.addColumn（'count'，'count'）

'count'

和

'percent'

是无效类型…您可以在浏览器控制台中检查错误（按F12）--这里，第一个参数应该是列类型，通常是

'string'

或

'number'

data.addColumn（'count'，'count'）-'count'
和'percent'是无效的类型。。。
import time
import random as r
from socketIO_client import SocketIO, LoggingNamespace

'''
sending data format:
    data= {
        'percentage': value
    }
'''

while True:
    with SocketIO('localhost', 8000, LoggingNamespace) as socketIO:
        # test data set

        send_data = {
            'percentage': r.random(),
        }

        # sending data set
        socketIO.emit('my event', send_data)
        time.sleep(1)