账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    放置多个且不同 style 的 google chart?
    22
    0

    我第一个是 bar style

    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
    
      $.getJSON('/data.json?type=view&m=' + m, function(json) {
        var data = new google.visualization.DataTable(json);
        data.addColumn('string', '');
        data.addColumn('number', '浏览次数');
        data.addRows(json);
    
        // Set chart options
        var options = {
                  chart: {
                    title: '',
                    subtitle: '',
                  },
                  bars: 'vertical',
                  vAxis: {format: 'decimal'},
                  width: 900,
                  height: 400,
                  colors: ['#E7736D']
                };
    
    
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.charts.Bar(document.getElementById('chart_div'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
    
      });
    }

    这是我第一个图表
    但是我想要在同一页放上第二个图表,style 也不是 bar,这能怎么做到?
    以下是谷歌范例:https://developers.google.com...

    google.charts.load('current', {'packages':['line']});
          google.charts.setOnLoadCallback(drawChart);
    
        function drawChart() {
    
          var data = new google.visualization.DataTable();
          data.addColumn('number', 'Day');
          data.addColumn('number', 'Guardians of the Galaxy');
          data.addColumn('number', 'The Avengers');
          data.addColumn('number', 'Transformers: Age of Extinction');
    
          data.addRows([
            [1, 37.8, 80.8, 41.8],
            [2, 30.9, 69.5, 32.4],
            [3, 25.4, 57, 25.7],
            [4, 11.7, 18.8, 10.5],
            [5, 11.9, 17.6, 10.4],
            [6, 8.8, 13.6, 7.7],
            [7, 7.6, 12.3, 9.6],
            [8, 12.3, 29.2, 10.6],
            [9, 16.9, 42.9, 14.8],
            [10, 12.8, 30.9, 11.6],
            [11, 5.3, 7.9, 4.7],
            [12, 6.6, 8.4, 5.2],
            [13, 4.8, 6.3, 3.6],
            [14, 4.2, 6.2, 3.4]
          ]);
    
          var options = {
            chart: {
              title: 'Box Office Earnings in First Two Weeks of Opening',
              subtitle: 'in millions of dollars (USD)'
            },
            width: 900,
            height: 500,
            axes: {
              x: {
                0: {side: 'top'}
              }
            }
          };
    
          var chart = new google.charts.Line(document.getElementById('line_top_x'));
    
          chart.draw(data, google.charts.Line.convertOptions(options));
        }

    我在 packages + line、改变名字也不行
    在网路上是有找到类似的方式
    http://crossdunk.github.io/go...
    但感觉历史久远,好像搭不起来

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 旧街旧巷等旧人ぅ 普通会员 1楼

      是的,你可以使用 Google Charts 提供的多个样式和类型来放置多个且不同风格的图表。以下是一些常用的样式和类型:

      1. 线图:线图可以用于显示数据随时间的变化趋势。你可以选择不同的线类型(例如,直线、折线或指数线)和线的颜色和样式。

      2. 柱状图:柱状图通常用于比较不同类别的数据。你可以选择不同的柱颜色和样式,以及柱的高度和宽度。

      3. 饼图:饼图可以用于显示数据在整体中的比例。你可以选择不同的饼颜色和样式,以及饼的大小和形状。

      4. 地图:地图可以用于显示地理数据,如地理位置、人口密度等。你可以选择不同的地图类型(例如,Google Maps、CartoDB或Google Fusion Map)和地图的风格(例如,实时、静态或预览)。

      5. 热力图:热力图可以用于显示数据之间的相关性。你可以选择不同的热力图类型(例如,颜色编码、面积编码或温度编码)和颜色和样式。

      6. 图表网格:图表网格可以用于显示数据的分布情况。你可以选择不同的图表网格类型(例如,固定或可变)和网格的大小和样式。

      你可以使用 Google Charts API 或其 JavaScript API 来创建和定制这些图表。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部