标签: google-visualization

使用Google Charts条形图,是否可以更改一个条形图的颜色.例如,我想将2006年的数据设为红色(其他条形图为蓝色).

 function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');
            data.addColumn('number', 'Sales');

            data.addRows(4);
            data.setValue(0, 0, '2004');
            data.setValue(0, 1, 1000);

            data.setValue(1, 0, '2005');
            data.setValue(1, 1, 1170);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, '2006');
            data.setValue(2, 1, 1400);

            data.setValue(3, 0, '2007');
            data.setValue(3, 1, 1030);


            chart = new google.visualization.BarChart(document.getElementById('visualization'));
            chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                              vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                             });
}

任何人都知道如何使用谷歌图表API使x轴标签垂直？

我需要在一个小图表中放入很多标签.

谢谢

我正在使用谷歌可视化条形图,我想自定义或更改单击栏时出现的工具提示文本和格式.

我一直在通过文档,但我没有找到实现这一点的方法.你知道吗:

1. 它甚至可能吗？
2. 如果是这样,你能提供一些代码示例吗？

使用谷歌条形图,这是我得到的:

这是我的自定义选项

var options = {
    width: 500, height: 240,
    legend : 'none',
    vAxis:{title:'Answers',textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
    hAxis: { title: 'Percentage', textStyle: { color: '#005500', fontSize: '12', paddingRight: '100', marginRight: '100'} } 
 };

我不能为这些<g>/ <rect>标签设置宽度吗？

是否可以在Google Chart PieChart切片中显示值而不是百分比？

谢谢,

在谷歌图表API图片目前已弃用,并计划在退休上二○一五年四月二十○日.

是否还有其他免费服务可以替换它并允许仅通过在URL中提供参数来生成图表图像？

以下是用于生成PNG图像的URL的示例,它可以用作HTML img源,尤其在电子邮件中非常有用:

http://chart.apis.google.com/chart?chxl=1:|Apr+04|Apr+05|Apr+06|Apr+07|Apr+08|Apr+09&chxp=1,0,20,40 ,60,80,100及反馈网站0,0,45&chxs = 1,676767,11.5,0,LT,676767&chxt = Y,X&CHS = 550x198&CHT = LS&CHCO = 3366CC,FF9900&CHDS = 0,45,0,45&CHD = T:7,12, 11,9,13,7 | 11,26,45,24,22,27&chdl =访问++++ |页+查看&chdlp = T && chdls = 333333,16&CHG = 100,20,0,0&的Chls = 4 | 2

这将生成以下图像,可以通过<img>标签轻松添加,并支持所有浏览器和电子邮件客户端.

如何删除Google可视化折线图中的水平网格线？我已经尝试过设置了

minorGridlines: {count: 0 }, gridlines: {count: 0 } 

在hAxis和vAxis上.

这是我的图表的一个方面.

http://jsfiddle.net/martlark/2XBhc/

当图表第一次加载初始默认Ajax回复时,它可以正常工作.如果我添加console.log(chart_data),我会看到我的默认数据,然后在提交后我看到新数据.唯一的问题是图表不会再次绘制自己.我知道drawChart函数不是第二次运行,我只是不知道为什么.我假设如果是,图表将重绘自己.对不起,如果答案很明显; 我是jQuery/Ajax的新手.

var chart_data;
var startdate = "default";
var enddate = "default";

function load_page_data(){
    $.ajax({
        url: 'get_data.php',
        data: {'startdate':startdate,'enddate':enddate},
        async: false,
        success: function(data){
            if(data){
                chart_data = $.parseJSON(data);
                google.load("visualization", "1", {packages:["corechart"]});
                google.setOnLoadCallback(function(){ drawChart(chart_data, "My Chart", "Data") })
            }
        },
    });
}

load_page_data();

function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
    var chart1_data = new google.visualization.DataTable(chart_data);
    var chart1_options = {
        title: chart1_main_title,
        vAxis: {title: chart1_vaxis_title,  titleTextStyle: {color: 'red'}}
    };

    var chart1_chart = new google.visualization.BarChart(document.getElementById('chart1_div'));
    chart1_chart.draw(chart1_data, chart1_options);
}

任何帮助,将不胜感激.谢谢!

我在Google Chart Tools上找到了以下JavaScript代码:

  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170); // sales for 2005
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(2, 2, 580);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);

    var chart = new google.visualization.ImageLineChart(document.getElementById('visualization'));
    chart.draw(data, {width: 500, height: 250, min: 0});
  }

如果我注释掉设置2005年销售额的代码行,则销售线将显示在从2006年开始到2007年结束的图表上.我期望看到从2004年(在Y = 1000)到2006年的销售线(在Y …

你如何设置谷歌图表的大小百分比:我在html中有这个:

<div id="chart_div" width="90%" height="20%"></div>

并且在js的选项中没有宽度和高度.

但图表大小不适应视口.

谢谢