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

Question

我正在寻找类似于Google Chart (example)的特定风格的Javascript或SVG图表库

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

我已查看Google Visualization API并尝试制作Line Chart in JSFiddle但似乎无法复制这种设计风格。有什么建议吗？

See Example Image

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

Answer 1

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

如果您希望在您将鼠标悬停在图表(Example: Google Trends)上时始终显示工具提示，则可以使用$(document).ready(function() { /* Register click events */ $(".tableImages").click(function(){ imageClickEvent().call(this); }); }); function imageClickEvent() { if($(this).is("img")) { alert("YES"); //nothing happens } } 选项(Example JSFiddle)来完成此操作适用于经典Google图表而非新材料图表。

＆＃13;

＆＃13;

focusTarget

＆＃13;

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));
}

＆＃13;

#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;
}

＆＃13;

＆＃13;

＆＃13;