主页 / 问题 / 1076520
Accepted
Alex
Asked:2020-01-31 12:15:15 +0000 UTC2020-01-31 12:15:15 +0000 UTC

带取景器的谷歌图表

  • 772

告诉我如何使用时间取景器中的 Google 图表构建图表，例如http://nvd3.org/examples/lineWithFocus.html或https://finance.i.ua/（汇率图表） 我也希望能够快速切换（图表底部的范围选择）- 1 个月、3 个月、1 年的数据

我在哪里可以阅读或观看此内容？

也许还有一些其他免费库可以提供此类解决方案？ 它应该如何的一个例子

javascript

1 个回答

  1. Best Answer

    您很可能会对 Google Annotation Chart感兴趣。这是一系列时间线图表，是Annotated Timeline的一个典型例子。

    值得注意的是，我不会搜索“取景器”这个词，而是将自己限制为“时间线图表缩放”。如评论中所述，d3 将这种类型的图表称为“画笔”。

    还值得注意的是，对于每个数据系列（在与日期相关的列中提供），您可以发送带有标题和注释的注释。

    在此处输入图像描述

    否则，除了设置比例和阴影外，图表不会突出显示。即使使用分钟行情，也可以非常快速地工作。

    活生生的例子

    <html>
  <head>
<script
  type="text/javascript"
  src="https://www.gstatic.com/charts/loader.js"
></script>
<script type="text/javascript">
  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', 'Kepler-22b mission');
    data.addColumn('string', 'Kepler title');
    data.addColumn('string', 'Kepler text');
    data.addColumn('number', 'Gliese 163 mission');
    data.addColumn('string', 'Gliese title');
    data.addColumn('string', 'Gliese text');
    data.addRows([
      [
        new Date(2314, 2, 15),
        12400,
        undefined,
        undefined,
        10645,
        undefined,
        undefined
      ],
      [
        new Date(2314, 2, 16),
        24045,
        'Lalibertines',
        'First encounter',
        12374,
        undefined,
        undefined
      ],
      [
        new Date(2314, 2, 17),
        35022,
        'Lalibertines',
        'They are very tall',
        15766,
        'Gallantors',
        'First Encounter'
      ],
      [
        new Date(2314, 2, 18),
        12284,
        'Lalibertines',
        'Attack on our crew!',
        34334,
        'Gallantors',
        'Statement of shared principles'
      ],
      [
        new Date(2314, 2, 19),
        8476,
        'Lalibertines',
        'Heavy casualties',
        66467,
        'Gallantors',
        'Mysteries revealed'
      ],
      [
        new Date(2314, 2, 20),
        0,
        'Lalibertines',
        'All crew lost',
        79463,
        'Gallantors',
        'Omniscience achieved'
      ]
    ]);

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

    var options = {
      displayAnnotations: true
    };

    chart.draw(data, options);
  }
</script>
  </head>

  <body>
<div id="chart_div" style="width: 630px; height: 183px;"></div>
  </body>
</html>

    • 2

相关问题