标签: google-visualization

我正在为客户开发一个网络应用程序,我想使用Google API来绘制一些漂亮的图表.

客户端有一些敏感数据,并提出了一些安全问题,特别是他们不希望他们的数据"转到谷歌".

有2个选项或API用于生成图表.图表API,您可以在其中构建网址并提交给Google,以便生成图形图像 - 显然客户数据会转到Google,因此此选项是否定的.

第二个选项是使用Visualization API.据我所知,生成可视化的代码是从谷歌下载的,但用于构建输出的数据永远不会离开浏览器,因此对于敏感数据使用是"安全的".这是准确的描述吗？

我查看了Google API文档以尝试回答我的问题,但似乎无法找到明确的答案.

请指教.

我想知道如何在从JavaScript构建的谷歌图表中设置轴步骤？我用它来设置min和max:

vAxis: {
title: 'temps (ms)',
    viewWindowMode: 'explicit',
    viewWindow: {
        max: 180,
        min: 0
    },
}

我需要添加一个其他约束来将垂直步长固定为0.1.

我使用Google Visualization API绘制折线图.以下是代码:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
    // Total Coupon View
    var data_total_users = new google.visualization.DataTable();
    data_total_users.addColumn('string', 'Total Users');
    data_total_users.addColumn('number', 'User Count');

    data_total_users.addRows(7);
    data_total_users.setValue(0, 0, 'Sunday');
    data_total_users.setValue(0, 1, 10);
    data_total_users.setValue(1, 0, 'Monday');
    data_total_users.setValue(1, 1, 4);
    data_total_users.setValue(2, 0, 'Tuesday');
    data_total_users.setValue(2, 1, 3);
    data_total_users.setValue(3, 0, 'Wednesday');
    data_total_users.setValue(3, 1, 7);
    data_total_users.setValue(4, 0, 'Thursday');
    data_total_users.setValue(4, 1, 8);
    data_total_users.setValue(5, 0, 'Friday');
    data_total_users.setValue(5, 1, 10);
    data_total_users.setValue(6, 0, 'Saturday');
    data_total_users.setValue(6, 1, 10);
    var chart = new google.visualization.LineChart(document.getElementById('chart_users_total'));
    chart.draw(data_total_users, {width: 1000, height: 400, title: '', …

我想在我的Java EE应用程序中包含Google Visualization API的图表.但是,无论我做什么,应用程序都无法识别API.我以前用过这个,所以我不明白我做错了什么.有人可以看看我的代码并告诉我我做错了什么吗？谢谢!

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link type="text/css" href="LOCATION/STYLENAME.css" rel="stylesheet"/>

<script src="/tis/javascript/common/jquery.inlinemenu.js" type="text/javascript"></script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the …

我一直在尝试为堆积条形图获取自定义工具提示.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Units');
data.addColumn('number', '1');
data.addColumn('number', '2');
data.addColumn('number', '3');
data.addColumn('number', '4');

_1 = 0.123
_2 = 0.23
_3 = 0.3
_4 = 0

data.addRow([_units, _1, _2, _3, _4,]);

var options = {
        isStacked: true,
        height: 150,
        chartArea: { height: 50 },
        legend: { position: 'top' },
};

bchart = new google.visualization.BarChart(bcontainer);
bchart.draw(data, options);

我的问题是如何为每个创建一个工具提示:_1,_2,_3,_4？

谢谢

我正在使用谷歌图表工具(https://developers.google.com/chart/)来显示数据,有时我的值非常高(100.000+).

我的图表尺寸非常小,而100.000不适合,但是100k会.有没有办法我可以配置vAxis在vAxis上以"K"显示数字,如果有高于10k的值？

我正在使用谷歌图表google.load("可视化","1",{packages:["corechart"]});

但是在检查网络使用情况时,加载时间非常慢,我发现format + en,default,corechart.I.js需要大约6秒才能加载.任何减少这个时间的工作,为什么这个文件不被缓存,每次从谷歌再次获取.

如何删除谷歌列图表中的水平网格线？我尝试了一些解决方案,但仍然无法将其删除.谢谢.

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
        ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
        ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
        ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
        ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
        ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
        ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
    ]);

    // Create and draw the visualization.
    new google.visualization.ColumnChart(document.getElementById('visualization')).
    draw(
        data,
        {
            title:"Yearly Coffee Consumption …

如何在角度4应用程序中集成谷歌图表？

我在这里阅读了SO问题的答案,但我认为它不完整.基本上,我正在尝试与之前的答案相同的策略,使用GoogleChartComponent和扩展它的另一个组件.出现两个错误,第一个是对子组件的super()缺少调用,第二个是在此代码中调用"new"

  createBarChart(element: any): any {
      return new google.visualization.BarChart(element);
  }

我收到错误"google.visualization.BarChart不是构造函数".

我看到其中一条评论也提到了<ng-content>数据投影的使用,但没有明确概述.

在尝试提出一个"好"的问题时,这是我的GoogleChartComponent:

export class GoogleChartComponent implements OnInit {
  private static googleLoaded: any;
  constructor() {
    console.log('Here is GoogleChartComponent');
  }

  getGoogle() {
    return google;
  }

  ngOnInit() {
    console.log('ngOnInit');
    if (!GoogleChartComponent.googleLoaded) {
      GoogleChartComponent.googleLoaded = true;
      google.charts.load('current', {
        'packages': ['bar']
      });
      google.charts.setOnLoadCallback(() => this.drawGraph());
    }
  }

  drawGraph() {
      console.log('DrawGraph base class!!!! ');
  }

  createBarChart(element: any): any {
      return new google.visualization.BarChart(element);
  }

  createDataTable(array: any[]): any {
      return google.visualization.arrayToDataTable(array);
  }
} …

我正在使用angular-google-chart创建一个面积图.我试图为特定区域显示不同的颜色.但是你可以看到红色和绿色线条(区域)的区域与蓝色区域重叠.配置有问题吗？

"data": {
    "cols": [{
        "id": "date",
        "label": "Date",
        "type": "string",
        "p": {}
    }, {
        "id": 'sd0',
        "label": 'sdo',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1',
        "label": 'sd1',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2',
        "label": 'sd2',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3',
        "label": 'sd3',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1Neg',
        "label": 'sd1Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2Neg',
        "label": 'sd2Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3Neg',
        "label": 'sd3Neg',
        "type": …