我是Google chart 的新手，我正在努力学习它。

我有

这是我的选择

      var options = {
          width: 400,
          height: 240,
          colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']

      };

Fiddle

如何隐藏标签：工作，吃饭？

我需要一些有关 Google API 数据数组创建的帮助。请参阅下面的详细信息：我有以下动态创建的数组。

schoolYear = [ 2014,2015,];
schoolReading = [420.5,520.5,];
schoolWriting = [436.5,536.5,];
schoolSpelling = [425.1,525.1,];
schoolNumeracy = [395.5,495.5,];
schoolGramPunc = [436,536,];
schoolTotAvg = [437,537,];

我正在尝试像这样创建 google.visualization.arrayToDataTable：

for (i = 0; i < schoolTotAvg.length; i++) {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Reading', 'Numeracy', 'Grammar/Punctuation', 'Writing', 'Spelling', 'Total Average'],
    [schoolYear, schoolReading, schoolNumeracy, schoolGramPunc, schoolWriting, schoolSpelling, schoolTotAvg]
  ]);
}

当我看到页面源时，我没有得到正确的数组。

有人可以帮忙吗？

--潘卡伊

我正在尝试从我创建但失败的数据数组中绘制图形。我尝试了我在这里看到的关于相同主题的所有内容，但没有帮助。请指教。同一页面中有 HTML，但我认为显示并不重要。

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

function getData(dateRange){
    var date = new Date();
    var currentDateInFormat = date.getFullYear() + "-" + date.getDate() + "-" + date.getMonth() + 1;
    var BASE_URL = 'https://query.yahooapis.com/v1/public/yql?q=';
    var yql_query_for_table_data;

    var dataArray = ['Date' , 'Stock Value'];

    if(dateRange === "year"){
        yql_query_for_table_data = 'select * from yahoo.finance.historicaldata where symbol = "YHOO" and startDate = "2009-09-11" and endDate = "2010-03-01"';
    }
    else if(dateRange === "halfYear"){
        yql_query_for_table_data …

我正在使用 Google 图表折线图，但在将其绑定到图表范围过滤器时遇到了一些问题。

这是我尝试过的：容器：

<div id="dashboard_div">
                <!--Divs that will hold each control and chart-->
                <div id="control_div" style="width: 100%; height: 100%"></div>
                <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
            </div>

JS部分：

var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'daily_container_count_lineChart',
    options: {
        theme: 'maximized'
    }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
        filterColumnIndex: 0
    }
});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);

我收到以下错误代替网页中的仪表板。控制台中没有错误。

一名或多名参与者未能绘制（）

您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法

您使用错误类型的数据而不是 DataTable 或 DataView 调用了 …

我有一个 DataTable、一个 DateRangeFilter 和一个聚合对象。我希望我可以使用 DateRangeFilter 来过滤 DataTable 中的数据并将聚合限制为 FILTERED DataTable。但事实并非如此。我做错了什么（可能忘记刷新/绘制），或者类似的事情是不可能的。

我的代码在这里：https : //jsfiddle.net/v0w5ehsc/

    var dashboard = new google.visualization.Dashboard(document.getElementById('daterange_div'));
dashboard.bind(slider, tableChart);
dashboard.draw(dataAll);

var grouped_data = google.visualization.data.group(
    dataAll,
    [0, 2],
    [
        {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
    ]
);

我已经开始使用谷歌最近推出的甘特图，它看起来非常适合通过图表跟踪任务。

我创建了 4 个任务并且图表加载正常，但它在开发产品和发布部分显示错误的日期，例如 2016 年 1 月。实际上我根本没有在我的数据中使用这个日期。这里有什么问题？

这是我的代码：

HTML：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript：

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['Design', 'Design and analysis',
     new Date(2015, 8, 1), new Date(2015, 8, 15), null, 25,  null],
    ['Development', 'Develop the product', …

我目前正在使用 ASP.NET 处理 Google Chart 并将其连接到数据库 (SQL Server)。但是我在尝试自定义工具提示时遇到了问题。

这是标题代码：

<script src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('1.1', { 'packages': ['bar'] });

</script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'sample_page.aspx/GetChartData',
            data: '{}',
            success: function (response) {
                drawchart(response.d); // calling method
            },

            error: function () {
                alert("Error Loading Data");
            }
        });
    })

    function drawchart(dataValues) {
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in …

出于一个我完全无法理解的原因，我无法获得工作的maxValue属性vAxis：

var options = { vAxis: { maxValue: .85 } }

这vAxis是一个范围为 0 到 100% 的百分比，我想通过将最大值设置为 85% 来节省一些空间。我认为这与这个项目在 7DataSources和 4之间切换有关，ChartTypes因为我在制作单个图表时从未遇到过这个问题。

以下代码段是简化案例，具有可能与该问题相关的最少功能。感谢您的时间和精力。

片段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>G04B32</title>
  <link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    *,
    *:before,
    *:after {
      font-style: normal !important;
    }
    body {
      position: relative;
    }
    form {
      background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png);
      background-color: #333;
    }
    #ii {
      margin-top: 80px
    }
    .panel {
      display: flex;
      flex-wrap: wrap; …

我有一个谷歌堆积条形图，它从数据库中提取数据并根据所述数据绘制图表。我能够四处搜索并找到一种根据行数动态设置高度的方法 - 但是对于我的一个搜索过滤器，图表看起来很差。

代码如下，适用于我的 5 个过滤器中的 4 个，但在第 5 个过滤器中，行数变得更大（大约 40-50）。

代码：

            var paddingHeight = 40;
            var rowHeight = data.getNumberOfRows() * 50;
            var chartHeight = rowHeight + paddingHeight;

            var options = {
                titlePosition: 'none',
                width: 1400,
                height: chartHeight,
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '50%' },
                isStacked: true,
                hAxis: {
                    title: 'Business Hours (excluding weekends & holidays)'
                },
                colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
                annotations: {
                    alwaysOutside: true,
                    textStyle: {
                        color: '#000000'
                    }
                }
            }

产生以下结果。第一张图片是我的 5 …

我试图在 for 循环中绘制多个 Google 图表，但似乎无法使其工作。我看到有人问过一些类似的问题，但仅限于 PHP。任何人都可以提供帮助？这是我到目前为止尝试过的https://jsfiddle.net/8nfbz1v1/

        <ul id="draw-charts"></ul>

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

for(var i = 0; i>6; i+){
var charts = "";
    google.charts.setOnLoadCallback(drawChart);

  function drawCharts() {

  charts += '<td><div id="chart_div' + i +'" style="border: 1px solid #ccc"></div></td>';
  $("#draw-charts").html(charts);

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 1],
      ['Onions', 1],
      ['Olives', 2],
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

    var options = {title:'How Much Pizza Sarah Ate Last Night',
                   width:400,
                   height:300};

    // Instantiate and draw the chart for Sarah's pizza.
    var …