标签: google-visualization

我的应用程序中有几个选项卡，每个选项卡通过 jQuery load() 函数加载不同的子页面。

我的问题是某些页面包含 Google Visualization 插件，但这些插件无法工作。

我的第一个方法是在正在加载的子页面中加载用于可视化 API 的 JavaScript，但这不起作用 - 在从 apis.google.com 加载某些内容时，页面会变成空白并卡住

我的第二种方法是在应该进行可视化的地方插入一个 div，然后调用一个脚本（我之前定义的）来填充这个 div。

这是生成可视化的脚本：

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  data.addRows([
     <?php echo /* raw data outputted by generating functions */ ?>
    ]);


  var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
  chart.draw(data, {
    displayAnnotations: true, 
    'scaleColumns': [0,1], 
'scaleType': 'allmaximized',
'displayZoomButtons': false
  });
}

这是我用来调用上述脚本的脚本（当单击选项卡时）。

$('#loadarea').load('tab1.php');
drawChart();

另外，这可能是相关的：在文档的开头，我使用 jQuery 预加载页面上的一些其他空格：

$(document).ready(function() {
  $('#side-display').load('info.php', {id:<?php echo $id …

我想在网页上显示我在 R 中生成的热图（矩阵）。我的矩阵看起来像这样，但在我的例子中，大小是 300x300。

基本上我正在寻找一个交互式集群，它看起来像这样：

http://online.wsj.com/article/SB125993225142676615.html#articleTabs%3Dinteractive

http://mbostock.github.com/protovis/ex/matrix.html

我希望能够点击一个分支，然后突出显示所选的组/文本，并淡出矩阵的其余部分。

我环顾四周，找不到太多东西。我什至不知道我应该使用什么语言？JSON、Flash、HTML5、javascript、谷歌图表？

如有任何意见和建议，我们将不胜感激。

谢谢。

我正在使用柱形图生成图表。下面是代码：

function drawActiveJobsChart() {
    var i=0;
    var j=0;

    var data = new google.visualization.DataTable();
    data.addColumn('string','Systems');
    data.addColumn('number', 'Counts');

    $.getJSON('SubSystemNumbers.action', function(json) {

        $.each( json.SysActNum, function( key, val ) {
            i++;
        });
        data.addRows(i);
        $.each( json.SysActNum, function( key, val ) {


            if (val>=30) {

            data.setProperty(j,1,'style','color:red');

            }
            data.setValue(j, 0,key);
            data.setValue(j, 1,val);
            j++;

          });
    });


    var options = {
      title: 'System Numbers',
      width:900, height:400,
      allowHtml: true,
      hAxis: {title: 'Systems', titleTextStyle: {color: 'red'},textStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById(chartDiv));
    chart.draw(data, options);
  }

现在我添加了逻辑，当 return val 大于 …

我正在处理一份报告，我需要用双轴填充图形，有人可以帮我找出如何实现这一点，这是我需要的示例图表。

我正在尝试使用https://developers.google.com/chart/interactive/docs/gallery/combochart但看起来这对我不起作用。

谢谢。

我正在使用谷歌图表。我想更改所选列的边框颜色和宽度。默认笔触颜色为白色，宽度为 1。我想将边框颜色更改为黑色，将宽度更改为 2。

代码 ：

var data = google.visualization.arrayToDataTable(mydata);
var options = {
                    width: 600,
                    height: 400,
                    legend: {position: 'top', maxLines: 4},
                    bar: {groupWidth: '50%'},
                    isStacked: true
                    };
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);

我用谷歌图表制作了半个圆环图，但有一个问题，可见百分比的总和等于 50%。有没有可能的解决方案？

我的图表的图像

我正在使用 Google 时间线图表并想使用点击功能。只是当我点击彩色矩形或文本时，我想要一个 bootstrap Modal 出现。

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
  [ 'Magnolia Room', 'Beginning JavaScript',       new Date(2017, 1, 30),  
new Date(2017, 2, 30) ],
  [ 'Learning for Life', 'Intermediate JavaScript',    new Date(2017, 3, 1),  
new Date(2017, 4, 30) ], …

我正在尝试为双 y 轴折线图设置刻度，但要么图无法加载，要么加载完全相同。任何帮助将不胜感激

目标是设置价格刻度：[0.002, 0.004。0.006。0.008]，音量增加1000

也有价格问题，例如：0.00242、0.00521 都显示为 0.1

<?php
$sql = "SELECT Timestamp, LastPrice, Volume FROM vol";
$result = $dbconnect->query($sql);
?> 
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>
   
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

	  
	  
           google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var button = document.getElementById('change-chart');
      var chartDiv = document.getElementById('chart_div');
		  
		  
		  
        var data = google.visualization.arrayToDataTable([
                ['Timestamp','LastPrice','Volume'],
                <?php
                    while($row = mysqli_fetch_assoc($result)){
                        echo "[           '".$row["Timestamp"]."', ".$row["LastPrice"].", ".$row["Volume"].",    ],";
                    }
					echo $row["LastPrice"];
                ?>
        ]);

        var materialOptions = {
			
		chart: {
          
        },
        width: 600,
        height: 300,
		
        series: {
          // …

我想在折线图上显示数据值，即鼠标悬停时出现的数据值，我需要默认情况下全部显示。我在这里尝试了解决方案Google Charts API: Always show the Data Point Values in Graph

data.addColumn({type: 'number', role: 'annotation'});

我将此添加到我的代码中（我不确定将它确切放在哪里）但它没有做任何更改。

这是我的代码的一部分：

<!DOCTYPE html>
<html>
<head>
    <title>Week/Orders</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([

                ['Week','Orders'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Week"]."', ".$row["Orders"]."],";
                    }
                ?>

               ]);


            var options = {
                title: 'Week Vs Orders',
                'width':1700,
                'height':600,

                legend: { position: 'bottom' }
                     };

               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options);  

        }

    </script>
</head>
<body> …

我使用以下设置创建了谷歌折线图：

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var options = {
        backgroundColor:{fill:'transparent'},
        legend:'none',
        series:{0:{color:'#aa8e57'}},
        lineWidth:4,
        pointSize:7,
        chartArea:{width: '86%'},    
        hAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72' 
        },
        vAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72'
        },
    };

    var dataMembers = new google.visualization.DataTable();
    dataMembers.addColumn('string', 'Date');
    dataMembers.addColumn('number', 'Users');
    dataMembers.addRows([
        ['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
    ]);    
    var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
    membersChart.draw(dataMembers, options);
}

我阅读了所有文档，但无法找到如何自定义这些额外的白色线条：

我做了很多实验，但我无法找出它们的显示方式以及如何将它们从图表中删除。或者至少，改变它们的颜色以匹配其余的网格线。