javascript - 向注释图表添加部分？

coder 2025-01-15 原文

我正在使用 Google Charts' Annotation Chart显示数据。一切正常，但未显示音量部分，如本 google finance chart 所示我相信，它使用相同的图表。

这是我到目前为止的内容，但我不知道如何包括该部分:

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Col1');
        data.addColumn('string', 'Col2');
        data.addColumn('string', 'Col3');
        data.addColumn('number', 'Col4');
        data.addColumn('string', 'Col5');
        data.addColumn('string', 'Col6');
        data.addRows([
          [new Date(2017, 2, 15), 85, 'More', 'Even More',
                                  91, undefined, undefined],
          [new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
                                  99, undefined, undefined],
          [new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
                                  96, 'Att', 'Good'],
          [new Date(2017, 2, 18), 60, 'Sales', 'Low',
                                  80, 'HR', 'Absences'],
          [new Date(2017, 2, 19), 95, 'Sales', 'Goals',
                                  85, 'HR', 'Vacation'],
          [new Date(2017, 2, 20), 40, 'Sales', 'Training',
                                  67, 'HR', 'PTO']
        ]);

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

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }

	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<div id='chart_div' style='width: 900px; height: 500px;'></div>

这是 google finance 图表的样子，但我似乎无法包括标记为红色的 volume 部分:

最佳答案

annotation chart 不包括中间图表的选项/成交量部分

这可以通过绘制另一个单独的图表手动添加

但是，第二个图表不能放在注释图表和它的范围过滤器之间

因此，您需要关闭注释的范围过滤器
并画出你自己的ChartRangeFilter

通常，自定义过滤器使用 dashboard 绑定(bind)到图表

但是，在为这个答案构建示例时，
我注意到注释图表没有正确重新绘制

应用过滤器然后移除过滤器后，
注释图表未返回原始状态
更正一下，每次绘制都需要创建注释图

请参阅以下工作片段，

柱形图用于成交量部分

范围过滤器使用'statechange'事件手动绑定(bind)

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

function drawDashboard() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Col1');
  data.addColumn('string', 'Col2');
  data.addColumn('string', 'Col3');
  data.addColumn('number', 'Col4');
  data.addColumn('string', 'Col5');
  data.addColumn('string', 'Col6');
  data.addRows([
    [new Date(2017, 2, 15), 85, 'More', 'Even More',
                            91, undefined, undefined],
    [new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
                            99, undefined, undefined],
    [new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
                            96, 'Att', 'Good'],
    [new Date(2017, 2, 18), 60, 'Sales', 'Low',
                            80, 'HR', 'Absences'],
    [new Date(2017, 2, 19), 95, 'Sales', 'Goals',
                            85, 'HR', 'Vacation'],
    [new Date(2017, 2, 20), 40, 'Sales', 'Training',
                            67, 'HR', 'PTO']
  ]);

  var rangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    dataTable: data,
    options: {
      filterColumnLabel: 'Date',
      ui: {
        chartOptions: {
          height: 60,
          width: '100%',
          chartArea: {
            width: '100%'
          },
          chartType: 'AreaChart'
        }
      }
    },
    view: {
      columns: [0, 1, 4]
    }
  });

  google.visualization.events.addListener(rangeFilter, 'ready', drawCharts);
  google.visualization.events.addListener(rangeFilter, 'statechange', drawCharts);

  rangeFilter.draw();

  function drawCharts() {
    var filterState = rangeFilter.getState();
    var filterRows = data.getFilteredRows([{
      column: 0,
      minValue: filterState.range.start,
      maxValue: filterState.range.end
    }]);
    var viewAnn = new google.visualization.DataView(data);
    viewAnn.setRows(filterRows);

    var chartAnn = new google.visualization.AnnotationChart(document.getElementById('chart_ann'));
    var optionsAnn = {
      displayAnnotations: false,
      displayRangeSelector: false
    };
    chartAnn.draw(viewAnn, optionsAnn);

    var viewCol = new google.visualization.DataView(data);
    viewCol.setColumns([0, 1, 4]);
    viewCol.setRows(filterRows);

    var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_col'));
    var optionsCol = {
      hAxis: {
        textStyle: {
          color: 'transparent'
        }
      },
      height: 72,
      legend: 'none',
      theme: 'maximized',
      vAxis: {
        textStyle: {
          color: 'transparent'
        }
      }
    };
    chartCol.draw(viewCol, optionsCol);
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_ann"></div>
<div id="chart_col"></div>
<div id="control_div"></div>

关于javascript - 向注释图表添加部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44208869/

javascript 向 39 google data jquery charts google-visualization

有关javascript - 向注释图表添加部分？的更多相关文章

ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
ruby - 将 Bootstrap Less 添加到 Sinatra - 2
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
ruby - 续集在添加关联时访问many_to_many连接表 - 2
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
ruby - 可以通过多少种方法将方法添加到 ruby 对象？ - 2
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资
ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2
我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？最佳答案我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby - 我如何添加二进制数据来遏制 POST - 2
我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_
ruby-on-rails - 在 Ruby on Rails 中添加 boolean 列值 - 2
我正在开发一个创建网络博客的RubyonRails项目。我希望将一个名为featured的boolean数据库字段添加到Post模型中。该字段应该可以通过我添加的事件管理界面进行编辑。我使用了以下代码，但我什至没有在网站上显示另一列。$railsgeneratemigrationaddFeaturedfeatured:boolean$rakedb:migrate我是RubyonRails的新手，非常感谢任何帮助。我的index.html.erb文件中的相关代码(views):FeaturedPost架构.rb:ActiveRecord::Schema.define(:version=>
ruby - 如何将便捷类方法添加到 ruby 中的 Singleton 类 - 2
假设我有一个这样的单例类:classSettingsincludeSingletondeftimeout#lazy-loadtimeoutfromconfigfile,orwhateverendend现在，如果我想知道使用什么超时，我需要编写如下内容:Settings.instance.timeout但我宁愿将其缩短为Settings.timeout使这项工作有效的一个明显方法是将设置的实现修改为:classSettingsincludeSingletondefself.timeoutinstance.timeoutenddeftimeout#lazy-loadtimeoutfromc
ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践？ - 2
我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里？我有一个应用程序/类，我最初把它放在(array_extensions.rb)中，在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是，当我转到railsconsole时，未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法？或者，一种预先定义的方式来添加它们？我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

javascript - 向注释图表添加部分？

有关javascript - 向注释图表添加部分？的更多相关文章

随机推荐