Question

我正在使用Google的Linechart，其中我从JSON数据中绘制了一个图表。我遇到了两个问题似乎无法修复。

即使我的选项中有'pointSize：6'，我仍然无法在图表的任何位置绘制任何点。他们只是看不到。
我似乎无法编辑任何工具提示。我添加了一个新列，既没有“dataTable.setValue（i，2，'test'）”也没有用“Tooltip”在JSON文件中手动添加新条目：“Test”似乎有用。

有谁知道我做错了什么，或者谁有更好的建议可能使用框架/ 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使其工作。

它为我提供了两点和工具提示，请参见此处： enter image description here

在这里：http://crclayton.com/example.html

而不是使用

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 Linechart - 没有点数，工具提示？

1 个答案: