类似谷歌的股票图表/折线图

Question

我正在寻找类似于谷歌图表的特定风格的Javascript或SVG图表库(示例)

我已经搜索了一段时间,但找不到任何与这种风格非常相似的东西,我很好奇是否有人能指出我正确的方向来达到类似的最终结果.

我已经查看了Google Visualization API并尝试在JSFiddle中创建折线图,但似乎无法复制那种设计风格.有什么建议？

See Example Image

Javascript,SVG和AngularJS都可以获得赏金奖励.SVG的奖励积分.

Answer 1

这是我能达到的最接近的结果，而且我认为考虑到要求，我做得非常好。

如果您希望当您将鼠标悬停在图表上时始终显示工具提示（例如：Google 趋势），focusTarget可以使用选项（示例 JSFiddle）来完成，该选项目前仅适用于经典 Google 图表，不适用于新材料图表。

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

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [new Date(2015, 9, 28), 6],
    [new Date(2015, 9, 29), 10],
    [new Date(2015, 9, 30), 19],
    [new Date(2015, 10, 0), 14],
    [new Date(2015, 10, 1), 16],

  ]);

  var options = {
    colors: ["#4184F3"],
    lineWidth: 3,
    legend: {
      position: "none"
    },
    hAxis: {
      pointSize: 2,
      format: 'MMM d',
      title: '',
      titlePosition: 'none'
    },
    vAxis: {
      title: 'Popularity'
    }
  };

  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}

#chart_div svg g circle {
  stroke: #4184F3 !important;
  fill-opacity: 1;
  r: 5;
  fill: #4184F3 !important;
  filter: none !important;
}
#chart_div svg g circle:hover {
  r: 8
}
#chart_div svg g path {
  stroke-width: 4 !important;
  stroke: #4184F3 !important;
  stroke-linejoin: bevel;
  stroke-width: 1;
  stroke-linecap: round;
  filter: none !important;
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>