标签: google-visualization

vAxis.direction我想我可以通过将其设置为来反转图表的垂直轴的顺序-1。但我刚刚学习并且对编写它的方式感到困惑。

这是当前的图表：

我想反转垂直轴的顺序，0 在顶部，80 在原点。

这是现有的代码：

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([
        [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
        [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
        [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
        [24, 60], …

我们试图在谷歌图表中显示水平线和垂直线。为此，我们需要使用 hAxis 和 vAxis 属性。

但是hAxis.format没有月份的格式，那么我们如何显示垂直线呢？

  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', ],
    ['Jan', 1000],
    ['Feb', 1170],
    ['Mar', 660],
    ['Apr', 1030]
]);

var options = {
    title: '',
    hAxis: {
        title: 'Year',
        minValue: 0,
        titleTextStyle: {
            color: '#333'
        },
        gridlines: {
            color: '#f3f3f3',
            count: 5
        },
         format: 'MMM'
    },
    vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }
};

JsFiddle

这是 jsFiddle 年，它显示了两条线（水平和垂直）

工作小提琴

我想在鼠标单击行/svg 图像上的任意位置时取出“文本值”，例如，在下图中，如果我单击第二个蓝色突出显示的行上的任意位置，那么我应该能够获取文本“Adams”，如下所示警报。我尝试迭代 svg 元素，但 svg 元素是水平创建的，而不是垂直创建的

我正在尝试创建 Google Charts 折线图。我从 C# MVC 控制器方法返回的 Json 如下所示：

我的 JS 代码如下所示：

function drawChart() {
    var jsonData = $.ajax({
        url: "/Misc/GetWeeklySalesData/",
        dataType: "json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    alert(data);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
    chart.draw(data, { width: 400, height: 240 });

我收到消息“表没有列”，但显然确实如此。

我想用 google GeoChart 进行可视化。我输入了国家代码。我想显示完整的国家/地区名称，但仅弹出国家/地区代码。

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

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

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>

我正在尝试创建一个谷歌蜡烛图，但也尝试在同一个图表上叠加多条线。

如果我执行以下操作，我可以在烛台上画一条线：

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');

data.addRow('Mon', 1, 1, 2, 2, 1.5]);
data.addRow('Tue', 2, 2, 3, 3, 2.5]);
data.addRow('Wed', 2, 2, 4, 4, 3.5]);

var options = {
  legend:'none',
  series: {1: {type: 'line'}}
};

但我似乎不知道如何添加第二行。

为了避免混淆，我将省略我尝试过的所有内容，但目标是仅添加另一个数据列并指定告诉图表将新数据覆盖为第二行所需的任何内容。

有什么办法可以让这个工作吗？

我知道有一个像 min、max （数字类型）这样的选项来配置值，但我想知道是否可以将它们设置为...

0.00% 至 100.00%

我知道可以在 GoogleSheets 图表上执行此操作，但我不确定如何在 javascript 上执行此操作或是否可能。

var formatnumbers = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 2
});
formatnumbers.format(data, 1);

这仅适用于中间值。

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

function drawChart() {

 var data = google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['ALCANCE', 80],
   ['OBJETIVO', 55],
   ['MEDICOS TOP', 68]
 ]);

 var options = {
   width: 600, height: 220,//400,120
   redFrom: 0, redTo: 75,
   yellowFrom:75, yellowTo: 85,
   greenFrom:85 , greenTo:100,
   minorTicks: 5,
   min:0,
   max:100
  };

 var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    
    //----------------new--------------//
    
 var formatnumbers = new google.visualization.NumberFormat({
   suffix: '%', …

我正在尝试通过添加行和刷新图表来使用过渡动画实现图表的加载动画.但它的行为与我的预期完全不同.这是小提琴http://jsfiddle.net/jATUX/ 一些代码:

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
        var data = new google.visualization.DataTable();
        data.addRows(5);

        data.addColumn('string', '');
        data.addColumn('number', 'Sales');

        var options = {
            title: 'Sales by months for 2013 year', curveType: 'function',
            "vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
            animation: { duration: 1000 }
        };
        var chart = new google.visualization.LineChart(document.getElementById('test'));

        var index = 0;
        var chartData = [
            ['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', …

首先,我检查了这些:

• 如何让Google Visulization LineChart显示垂直网格线？
• Google Chart:AreaChart vAxis网格线未绘制

而且他们似乎并不是我正在寻找的东西,所以希望这不是一个重复的问题.

我在将网格线添加到Google AreaChart垂直轴时遇到问题.我用过:

 vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 5
        }
    }

但它似乎没有工作,当我更改vAxis计数的值:它添加行到hAxis :(

见:http://jsfiddle.net/j29Pt/2/

谁能解决这个问题？

提前致谢 :)

如何在饼图中选择切片以使其具有悬停(突出显示)效果？是否支持？setSelection似乎没有以这种方式工作:

var chart = new google.visualization.PieChart(element);
chart.draw(dataTable, options);

...
chart.setSelection({row: rowIdx});