标签: google-visualization

Google Charts,隐藏列的显示,但保留基础数据以供使用

在以下JSON中:

        var data = new google.visualization.DataTable(
            {
            cols: [{id: 'Option1', label: 'Manufacturer', type: 'string'},
                   {id: 'Option2', label: 'Region', type: 'string'},
                   {id: 'Option3', label: 'Option3', type: 'number'},
                   {id: 'Option4', label: 'Option4', type: 'number'},
                   {id: 'Option5', label: 'Option5', type: 'number'},
                   {id: 'Option6', label: 'Option6', type: 'number'},
                   {id: 'Option7', label: 'Option7', type: 'number'},
                   {id: 'Option8', label: 'Option8', type: 'number'}],


            rows: [{c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]},
                    {c:[{v: 'Ford'}, {v: 'South East'}, {v: …
Run Code Online (Sandbox Code Playgroud)

json google-visualization

9
推荐指数
1
解决办法
9334
查看次数

以编程方式格式化Google图表

使用以下代码如何设置格式,以便CurrencyValue1和CurrencyValue2在图表中以美元(作为货币值)显示?

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'CurrencyValue1');
    data.addColumn('number', 'CurrencyValue2');

    data.addRows(1);
    data.setValue(0, 0, new Date(2011, 8, 12));
    data.setValue(0, 1, 300.0000);
    data.setValue(0, 2, 759.1707);

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

    chart.draw(data, { width: 660, height: 470, title: 'Heading', is3D: true, backgroundColor: '#f5f3e5' });
}
Run Code Online (Sandbox Code Playgroud)

html javascript formatting charts google-visualization

9
推荐指数
1
解决办法
1万
查看次数

如何仅在jqplot中将y轴值显示为整数

如何将y轴的值变为整数?

我目前有这个值0.0 1.0 1.5 2.0 2.5 3.0.我想把它改成像这样的0 1 2 3等....

谢谢!干杯!

javascript jquery charts google-visualization jqplot

9
推荐指数
2
解决办法
9628
查看次数

将JSON日期从Perl发送到谷歌图表API

我有一个小舞者应用程序,它提供一些HTML(包括调用谷歌图表API的javascript)和其他URL查询数据库,并以您可以传递给google.visualization.DataTable的形式返回编码JSON中的数据.javascript在舞者应用程序中查询JSON数据,然后将其传递到google图表API中 - 简化版本为:

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

      google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(initialize);

function initialize() {
    var res = $.ajax({
        url: "/data/2",
        dataType:"json",
        async: false,
        data: "{}",
        contentType: "application/json",
        error: function(jqXHR, textStatus, errorThrown) {
             alert('textStatus ' + textStatus);
             alert('errorThrown ' + errorThrown);
        }
    });
    jsonData = res.responseText;
    var data = new google.visualization.DataTable(jsonData);

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});

}
    </script>
Run Code Online (Sandbox Code Playgroud)

问题是Perl返回的一些数据包含日期/时间戳,所以应该将类型设置为"datetime":

{"rows":[{"c":[{"v":"WHAT_CAN_I_PUT_HERE"},{"v":"2095"}]}],"cols":[{"type":"datetime","label":"DTU"},{"type":"number","label":"COUNT"}]}
Run Code Online (Sandbox Code Playgroud)

在Javascript中,您可以使用以下命令创建传递给Google图表API的日期:

new Date(2012, 1, 08, 09, 32, 0)
Run Code Online (Sandbox Code Playgroud)

如何从Perl发送以JSON编码的日期,以便谷歌图表API能够理解它?如果你不能为我提供其他选择?

javascript perl json google-visualization

9
推荐指数
2
解决办法
1万
查看次数

如何在Google GeoChart中使用不同的颜色

我理解如何使用GeoChart显示连续的数据(即温度).

但是,如何将其配置为显示不同的数据集(共和党,民主,独立的州)?这可能吗?

谢谢!

javascript maps google-maps google-visualization

9
推荐指数
3
解决办法
1万
查看次数

谷歌折线图的虚线

我想要一个谷歌折线图,其中一个系列是虚线.

这可能使用谷歌jsapi(javascript)?

我实际上计划使用ComboChart,大部分数据使用AreaChart,但使用LineChart的一个系列.我希望那条线是一条虚线......

charts google-visualization

9
推荐指数
1
解决办法
7924
查看次数

Google可视化API - 堆积条形图 - 自定义工具提示

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

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);
Run Code Online (Sandbox Code Playgroud)

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

谢谢

google-visualization

9
推荐指数
1
解决办法
8231
查看次数

谷歌图表"K"而不是数千

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

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

javascript google-visualization

9
推荐指数
3
解决办法
5383
查看次数

在Google Geocharts中显示区域内的文字

如何在区域上显示文字?目前它仅显示所选区域,鼠标悬停在其上方显示文本.我需要显示文本和区域.检查这个小提琴 http://jsfiddle.net/manuiec/k2kvjddf/3/

        google.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }
Run Code Online (Sandbox Code Playgroud)

google-visualization

9
推荐指数
1
解决办法
1308
查看次数

格式化Google Charts日期时间轴标签的时区

我正在使用GoogleCharts沿一个轴绘制一个'datetime'类型的折线图.我想格式化轴标签,以便它们在指定的时区而不是默认的浏览器时区显示时间.

通过阅读文档,有一个DateFormat对象,可以提供'timeZone'选项,然后使用相应的DataTable列调用以格式化该列中的所有单元格.我注意到,如果将DataTable其绘制为表格,则执行此操作会导致格式正确的值.但是,相同的格式不适用于图表上的轴标签,如LineChartBar.

这是我的代码:

var dataTable = new google.visualization.DataTable();

dataTable.addColumn('datetime', 'Time');
dataTable.addColumn('number', 'Wolves');
dataTable.addRows([
  [new Date(2020, 1, 1, 12), 1],
  [new Date(2020, 1, 1, 13), 3]
]);

// Create DateFormat with a timezone offset of -4
var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4});

// Format the first column
dateFormat.format(dataTable, 0);

dataTable.getFormattedValue(0, 0); // "February 1, 2020 at 8:00:00 AM UTC-4"

var table = new google.visualization.Table(document.getElementById('wolf_table'));
table.draw(dataTable);

var lineChart = new …
Run Code Online (Sandbox Code Playgroud)

javascript timezone google-visualization

9
推荐指数
1
解决办法
3591
查看次数