Google-like 股票图表/折线图

Question

的特定样式的 Javascript 或 SVG 图表库

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

我查看了 Google Visualization API and tried making a Line Chart in JSFiddle，但似乎无法复制那种设计风格。有什么建议吗？

See Example Image

Javascript、SVG 和 AngularJS 都可以作为赏金奖励。 SVG 加分。

Answer 1

这是我设法得到的最接近的结果，我认为我已经很好地满足了要求。

如果您希望在将鼠标悬停在图表 (Example: Google Trends) this can be accomplished with the focusTarget option (Example JSFiddle) 上时始终显示工具提示，该图表目前仅适用于经典 Google 图表，不适用于新的 material 图表.

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>

Google-like 股票图表/折线图

Google-like Stock Chart / Line Chart

javascript

charts

svg

angularjs

angular-material