草庐IT

javascript - 日期格式的谷歌图表范围过滤器控件

coder 2024-05-12 原文

我有一个页面,该页面使用带 ChartRangeFilter 控件的折线图显示数据。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    for (var i = 0; i < 12; i++) {
        data.addRow([new Date(2016, i,1), Math.floor(Math.random() * 200), Math.floor(Math.random() * 200)]);
    }

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                },
                chartView: {
                    columns: [0, 1]
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div'
    });
    function setOptions (wrapper) {
        wrapper.setOption('width', 620);
        wrapper.setOption('chartArea.width', '80%');
    }

    setOptions(chart);

    dash.bind([control], [chart]);
    dash.draw(data);
    google.visualization.events.addListener(control, 'statechange', function () {
        var v = control.getState();
        document.getElementById('dbgchart').innerHTML = v.range.start+ ' to ' +v.range.end;
        return 0;
    });
}
</script>

<div id="dashboard">
    <div id="chart_div"></div>
    <div id="control_div"></div>
    <p><span id='dbgchart'></span></p>
</div>

这是一个有效的 JSFiddle .

这里的控件从 1 月 1 日开始。当我将开始范围更改为 1 月 2 日时,图表日期从 2 月开始显示。我无法找出原因。任何人都可以帮助我吗?在最终范围内,它似乎工作正常。

最佳答案

在此示例中,在 'statechange' 上——修改所选图表范围的开始和结束月份的值,以确保绘制数据点。
然后使用更新的选项重新绘制图表。

google.charts.load('44', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    data.addRow([new Date(2016,  0, 1), 1,123]);
    data.addRow([new Date(2016,  1, 1), 6,42 ]);
    data.addRow([new Date(2016,  2, 1), 4,49 ]);
    data.addRow([new Date(2016,  3, 1), 23,486 ]);
    data.addRow([new Date(2016,  4, 1), 89,476 ]);
    data.addRow([new Date(2016,  5, 1), 46,444 ]);
    data.addRow([new Date(2016,  6, 1), 178,442 ]);
    data.addRow([new Date(2016,  7, 1), 12,274 ]);
    data.addRow([new Date(2016,  8, 1), 123,4934 ]);
    data.addRow([new Date(2016,  9, 1), 144,4145 ]);
    data.addRow([new Date(2016, 10, 1), 135,946 ]);
    data.addRow([new Date(2016, 11, 1), 178,747 ]);

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
          width: 620,
          chartArea: {
            width: '80%'
          },
          hAxis: {
            format: 'MMM',
            slantedText: false,
            maxAlternation: 1
          }
        }
    });

    function setOptions() {
        var firstDate;
        var lastDate;
        var v = control.getState();

        if (v.range) {
          document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
          firstDate = new Date(v.range.start.getTime() + 1);
          lastDate = new Date(v.range.end.getTime() - 1);
          data.setValue(v.range.start.getMonth(), 0, firstDate);
          data.setValue(v.range.end.getMonth(), 0, lastDate);
        } else {
          firstDate = data.getValue(0, 0);
          lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
        }

        var ticks = [];
        for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
          ticks.push(data.getValue(i, 0));
        }

        chart.setOption('hAxis.ticks', ticks);
        chart.setOption('hAxis.viewWindow.min', firstDate);
        chart.setOption('hAxis.viewWindow.max', lastDate);
        if (dash) {
          chart.draw();
        }
    }

    setOptions();
    google.visualization.events.addListener(control, 'statechange', setOptions);

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind([control], [chart]);
    dash.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
    <div id="chart_div"></div>
    <div id="control_div"></div>
    <p><span id='dbgchart'></span></p>
</div>

关于javascript - 日期格式的谷歌图表范围过滤器控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36026983/

有关javascript - 日期格式的谷歌图表范围过滤器控件的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - date_field_tag,如何设置默认日期? [ rails 上的 ruby ] - 2

    我想设置一个默认日期,例如实际日期,我该如何设置?还有如何在组合框中设置默认值顺便问一下,date_field_tag和date_field之间有什么区别? 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag,如何设置默认日期?[rails上的ruby],我们在StackOverflow上找到一个类似的问

  3. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别,作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  4. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据,该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中,我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤,而不是严格相等。然而,这是行不通的:scope:my_scope,->(que

  5. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法,但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗?编辑解释我的环境,并改变问题的范围。因此,我的项目将使用jsapiFullCalendar,这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么,以正确的格式将日期保存在数据库中,或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  6. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如,今天的日期为07-09-2015),我想看看是不是在过去的七天内。谁能推荐一种方法? 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/32438063/

  7. ruby - 当使用::指定模块时,为什么 Ruby 不在更高范围内查找类? - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后,我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是,如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误,还是仅仅是Ruby解析变量名的方式的逻辑结果? 最佳答案 Isthisabug,or

  8. ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2

    这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build

  9. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如,CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  10. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗? - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件,但是当我生成RDoc时,自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件?它可以配置为自动检测文件后缀的格式吗?(例如README.textile通过RedCloth运行,但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件,只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

随机推荐