标签: google-visualization

我看到Google的示例代码列出了1月份的日期,但该图表显示了2月份的日期!

在我的测试机器上,它正在做同样的事情.我告诉它显示九月的日期,但它显示十月的日期!

任何人都可以确认这发生了吗？

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

这是原始图表.

添加Y轴标签时,它看起来像这样.

如何垂直读取Y轴标签？

我正在使用此DataTable 绘制图表(Google Charts API):

chart_data = new google.visualization.DataTable();
chart_data.addColumn('string','date');
chart_data.addColumn('number','value');

chart_data.addRows([
    ["10 May",0.23],
    ["11 May",0.26],
    ["12 May",0.29],
    ["13 May",0.23],
    ["14 May",0.21],
    ["15 May",0.25],
    ["16 May",0.28]
]);

我需要弄清楚DataTable中值列的最低值和最高值.有一些名为google.visualization.data.max的函数,但是没有关于如何实现它的任何实际代码示例.有人之前使用过这个功能吗？或者,有人为此问题提供另一种解决方案吗？谢谢!

我试图让这里给出的Google柱形图示例正常工作.

这是我的尝试:http://jsfiddle.net/dwNE4/ (注意:这给我带来了一些麻烦)

这是小提琴的内容:

HTML

<script src="http://www.google.com/jsapi"></script>

JS

google.load('visualization', '1', {packages: ['corechart']});

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
['2008',  1901067,   6792087,       1037327,      1284795,   6240921, …

我的垂直轴值不可见,如图所示.我的代码可能有什么问题？

      function drawVisualization() {
    google.visualization.drawChart({
      containerId: 'visualization',
      dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
      query: 'SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s',
      chartType: 'BarChart',
      options: {
        title: 'Number of Students and Teachers',
        vAxis: {
          title: 'Environment'
        },
        hAxis: {
          title: 'Number'
        }
      }
    });
  }

我正在使用Google Charts尝试创建一个与第一个标记为示例的折线图:

https://developers.google.com/chart/interactive/docs/gallery/linechart

但是,我不能使用google.visualization.arrayToDataTable(),如第一个示例所示.

问题是我想为每个绘制点添加注释和annotationText.文档说我必须使用:

google.visualization.DataTable()

为此,我必须做到以下几点:

    var data1 = [
      [ 'C'   ,4, 'o', 'note'],
      [ 'D'   ,6, 'o', 'note'],
      [ 'O'   ,4, 'o', 'note']
    ];
    var chartData = new google.visualization.DataTable();

    chartData.addColumn('string', 'X'); // Implicit series 1 data col.
    chartData.addColumn('number', 'DOGS'); // Implicit domain label col.
    chartData.addColumn({type:'string', role:'annotation'});
    chartData.addColumn({type:'string', role:'annotationText'});  

    chartData.addRows(data1);
    var chart = new    
          google.visualization.LineChart(document.getElementById('visualization'));

    var options = {
             title: "My Title",                            
    };
    chart.draw(chartData,options);

这给了我一行绘图数据.

我如何调整这个以允许我添加第二行绘图数据？goo

尝试在没有幸运的情况下在隐藏元素中渲染Google图表.小提琴波纹管有一个带引导标签的例子:

小提琴

安德鲁在这里得到了一些帮助:如何在显示标签时绘制谷歌图表？但是图表现在可以在我与它交互的任何时候重新渲染(例如使用范围过滤器).

HTML代码是:

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs" data-tabs="tabs">
            <li class="active">
                <a href="#A" data-toggle="tab">Tab A</a>
            </li>
            <li class="">
               <a href="#B" data-toggle="tab">Tab B</a>
            </li>
            <li class="">
                <a href="#C" data-toggle="tab">Tab C</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="A">
                <div id='ChartA'></div>
            </div>
            <div class="tab-pane" id="B">
                <div id='ChartB'></div>
            </div>
            <div class="tab-pane" id="C">
                <div id='ChartC'></div>
            </div>
        </div>
    </div>
</div>

所有的JS代码都在小提琴中.

有什么方法可以更改Google折线图中的折线不透明度吗？

我正在使用以下代码：

function drawLineChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006', 660, 1120],
          ['2007', 1030, 540]
        ]);


        var options1 = {
            legend: { position: 'bottom', maxLines: 3 },
            trendlines: {
                1: {
                    type: 'linear',
                    color: 'green',
                    lineWidth: 10,
                    opacity: 0.3,
                    showR2: true,
                    visibleInLegend: true
                }
            },
            title: 'Company Performance'
        };


        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options1);
    }

我正在尝试为十进制格式的特定图形设置选项。我遇到了许多问题，但似乎无法弄清楚为什么它对我不起作用。

var temp_chart_options = {
   title: 'Temperature',
   hAxis: {title: 'Date',  titleTextStyle: {color: '#262626'}, format:'decimal' },
   vAxis: {minValue: 0, format: 'decimal'},
   keepInBounds: true,
};

temp_chart.draw(temp_data, temp_chart_options);

我尝试做format: 'decimal'，或者format: { pattern: 'decimal' }甚至做了temp_chart.draw(data, google.charts.Line.convertOptions(temp_chart_options));，甚至看着这些问题：

• 谷歌图表垂直轴和工具提示值格式
• Google Chart垂直轴和工具提示值格式
• 如何在Google API Linechart中设置数字格式？

但是它们似乎都不起作用:(

编辑

有谁知道如何更改悬停格式？

我想像AnnotationChart一样在AreaChart顶部添加缩放按钮。我搜索了相同的内容，但没有找到解决方案。谁能告诉我解决方案？我需要这样的按钮：

谢谢