标签: google-visualization

当用户放大一系列日期时,有没有办法强制注释时间线图自动改变Y轴上的比例？

检查下面的示例,并注意2009-10-09的值("价格")比其他值大两个数量级.当用户放大时,例如2009-10-01 - 2009-10-08,Y轴不变(使图形相当无用).有没有办法自动重新缩放Y轴,以便在这个例子中它的范围从0到25或更合理(然后当用户缩小时当然回到默认值)？

示例:http://jsbin.com/ifogo

示例代码(与上面的链接相同):

<script src="http://www.google.com/jsapi"></script>
<div id="visualization" style="width: 800px; height: 400px;"></div>
<script>
google.load('visualization', '1', {packages: ['annotatedtimeline' ]});
function drawVisualization() {
  var data = new google.visualization.DataTable({
  cols: [{label: 'Date', type: 'date'}, {label: 'Price', type: 'number'}],
  rows: [
    { c:[{v: new Date(2009, 10, 1) }, {v: 11 }]},
    { c:[{v: new Date(2009, 10, 2) }, {v: 12 }]},
    { c:[{v: new Date(2009, 10, 3) }, {v: 13 }]},
    { c:[{v: new Date(2009, 10, 4) }, {v: …

我很难让Google Charts了解日期时间格式.我使用了一个示例[1],其中日期时间格式设置为简单的月份日和年份,但我将其更改为输入datetime类型.以下页面提供了一个示例:

http://www.sccs.swarthmore.edu/users/09/leo/cgi-bin/viewer.php

代码的开头如下:

data.addColumn('datetime', 'Date');
data.addColumn('number', 'Active or not');      
data.addRows(1768);
data.setValue(0, 0, new Date(1306192258));
data.setValue(0, 1, 1);

为什么Google会将该日期格式更改为1970年1月15日？(大纪元开始时间？)

谢谢!

[1] http://www.beakkon.com/geek/how-to/create-interactive-charts-using-google-charts-api

有没有办法使用谷歌图表Javascript API来中心条形图上的条形图 - 谷歌图表示例？我想用谷歌图表模拟一个漏斗图.Google图表不支持渠道类型的图表.

我可能只是累了，但似乎无法拉出Google Charts API DataTable中单个单元格的值。我猜想是这样的：

DataTable.getCell（row，col）;

我只是忽略了一些非常幼稚的东西吗？

这是我一直在使用的API参考：http : //code.google.com/apis/chart/interactive/docs/reference.html

我有以下数据的服务结果.它肯定会扩大.我使用谷歌图表来显示这些数据.但我现在做的是静态的.有没有一种简单的方法可以轻松地将来自服务的数据串转换为json格式.我不想使用foreach循环为谷歌图表数据生成该字符串.我也在我的项目中使用angularjs.感谢任何帮助

[
  {
    "date": "2013-05-01",
    "amount": null,
    "imprCount": 120,
    "clickCount": 141
  },
  {
    "date": "2013-05-02",
    "amount": null,
    "imprCount": 1122,
    "clickCount": 125
  },
  {
    "date": "2013-05-03",
    "amount": null,
    "imprCount": 1782,
    "clickCount": 1154
  }
]

//Chart Data
chartIncome.data = {"cols": [
        {/*id: "month",*/ label: "Month", type: "string"},
        {/*id: "income-id",*/ label: "Income", type: "number"}
    ], "rows": [
        {c: [
            {v: "2013-05-01"},
            {v: 12}
        ]},
        {c: [
            {v: "2013-05-02"},
            {v: 25}
        ]},
        {c: [
            {v: "2013-05-03"},
            {v: 203}

        ]},
        {c: [
             {v: "2013-05-04"},
             {v: …

我正在尝试将一个正在运行的谷歌图表示例集成到我的ember.js应用程序中.问题是,我不确定将drawChart()函数放在何处,以便仅在页面上的目标DOM元素运行时才运行.

• Ember app示例:http://jsbin.com/oqeSabI/4/edit
• 工作谷歌图表示例:http://jsfiddle.net/doub1ejack/h7mSQ/96/

我认为加载函数的正确位置在视图中(我没有看到任何理由将它放在模型/控制器/路由中).但我需要确保drawChart()在模板完成渲染并且<div id='chart'>元素存在之后才会调用.

显然View.init()太早了. 我应该在哪里调用我的构建函数？
它甚至属于一个视图(也许我应该使用控件或把手助手吗？)

App.DashboardView = Ember.View.extend({
  name: "",
  init: function(){
    // this breaks the app...
    //google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawBarGraph);
    this.set('name', 'ted');
    return this._super();
  }
});

我正在使用Django创建一个带有gcharts库的网站,但我收到错误:

ImportError: You must install the gviz_api library.

我该如何解决这个错误？

我有一个谷歌图表,百分比值从0到100%(即0到1)当我将hAxis.gridlines.count设置为10期望得到网格线0, 10, 20, ... 90, 100 我得到网格线0, 12, 24, 36, ..., 96, 108

我现在找不到任何解决方案.

这是我的代码:

function getData() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable([
      ['Category', 'Fulfillment (%)'],
      ['A', .75],
      ['B', .50],
      ['C', .50],
      ['D', .30],
      ['E', 0]
    ]);

    // Set chart options
    var options = {
        'title': 'My Title',
        'height': 300,
        'backgroundColor': 'none',
        'hAxis': {
            'maxValue': 1,
            format: '#%',
            gridlines: {
                count: 10
            }
        },
        'colors': ['#F5821E'],
        legend: { position: "none" }
    };

    var …

我正在使用带有React和Redux的Google Charts API.获取"错误google.charts.load()不能在版本45或更早版本中多次调用"

我不确定如何解决这个问题,因为每次因用户与应用程序交互而导致数据发生变化时我都需要重新渲染我的图表.我在ComponentWillMount中加载数据后绘制了三个图表

componentWillMount() {

        //Loads all sales belonging to a user

        this.props.fetchSales(this.props.activeUser._id).then(() => {

            // 3 below functions load total revenue for today, the week, and the month

            this.calculateTodaysRevenue();
            this.calculateWeekRevenue();
            this.calculateMonthRevenue();
        });

    }

如果我们看一下calculateTodaysRevenue(),你会看到这是我在this.setState({})结束后在最后调用google.charts.load()的地方:

calculateTodaysRevenue() {

        //all of today's date values pulled from state

        const { currentDay, currentMonth, currentYear } = this.state;

        let todaysTotalRevenue = 0;
        let dataRowsForTodaysRevenue = [];

        this.props.allSales.map((sale) => {

            //checks the date key of each sale to see if it matches today's date

            if …

我想使用ChartJS绘制这样的图表.但我找不到连接第一个和最后一个点的解决方案,并在连接区域内显示单个唯一点.而且我还需要用不同的颜色设计每个点的样式.我尝试过探索ChartJS文档,但找不到解决方案.是否有任何图表绘制库具有这些功能或如何使用ChartJS执行此操作？