Google 折线图 - 没有磅值、工具提示？

Question

我正在使用来自 Google 的折线图，其中我根据 JSON 数据绘制了图表。我运行有两个问题似乎无法解决。

尽管我的选项中有 'pointSize: 6'，但我似乎仍然无法在图表上的任何地方画出任何类型的点。他们只是不可见。
我似乎无法编辑任何工具提示。我添加了一个新列，但 "dataTable.setValue(i, 2, 'test')" 和使用 "Tooltip":"Test" 在 JSON 文件中手动添加新条目似乎都不起作用。

任何知道我做错了什么的人，或者谁有更好的建议可以使用 framework/api？我正在尝试用简单的代码可视化数据故事。

<html>
<head>
  <style>
  body{
    /*overflow: hidden;*/
  }
    #linechart{
      margin-top: 20px;
      margin-left: 30px}
  </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
  <script src='js/dimple.v2.1.2.js'></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

     $(function() {
        $.getJSON('data/priceData.json', function(data) {

      var dataTable = new google.visualization.DataTable();
      dataTable.addRows(1800);
      dataTable.addColumn('string', 'Date');
      dataTable.addColumn('number', 'Value');
      //dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true} });

      $.each(data, function(i, object){
        dataTable.setValue(i, 0, object.DateY);
        dataTable.setValue(i, 1, object.ClosePrice);
        dataTable.setValue(i, 2, object.Tooltip);
        //dataTable.setValue(i, 2, 'yo');
      });

      var options = {   
      colors: ['orange'],   
      tooltip: {isHtml: true},
        chart: {
          title: 'The Value of the Bitcoin',
          subtitle: 'in dollars (USD)'
        },

        animation: {
          duration: 1000,
          easing: 'in',
          startup: true
        },

        width: 1950,
        height: 850,
        pointSize: 6
      };

      var chart = new google.charts.Line(document.getElementById('linechart'));
      chart.draw(dataTable, options);
        });
      });
    };
  </script>
</head>
<body>
  <div id="linechart"></div>
</body>
</html>

Answer 1

我使用 google.visualization.LineChart 而不是 google.charts.Line 让这个工作。

它给了我分数和工具提示，请看这里：

而不是使用

google.load('visualization', '1.1', {packages: ['line']});

尝试包括

<script type="text/javascript"
      src="https://www.google.com/jsapi?autoload={
        'modules':[{
          'name':'visualization',
          'version':'1',
          'packages':['corechart']
        }]
}"></script>

然后代替：

  var chart = new google.charts.Line(document.getElementById('linechart'));

只需尝试使用：

  var chart = new google.visualization.LineChart(document.getElementById('linechart'));

应该可以了。如果您还有其他问题，请告诉我。

Google 折线图 - 没有磅值、工具提示？

Google Linechart - No Pointsize, Tooltips?

visualization

linechart

tooltip

google-visualization