小编Whi*_*Hat的帖子

Google Charts信息中心 - 隐藏列

我使用谷歌图表仪表板来显示折线图,我想在运行时控制显示的元素.例如:

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5     ],
    ['B',   2,       0.5,         1       ],
    ['C',   4,       1,           0.5     ],
    ['D',   8,       0.5,         1       ],
    ['E',   7,       1,           0.5     ],
    ['F',   7,       0.5,         1       ],
    ['G',   8,       1,           0.5     ],
    ['H',   4,       0.5,         1       ],
    ['I',   2,       1,           0.5     ],
    ['J',   3.5,     0.5,         1       ],
    ['K',   3,       1,           0.5     ],
    ['L',   3.5,     0.5,         1 …
Run Code Online (Sandbox Code Playgroud)

javascript google-visualization

14
推荐指数
1
解决办法
3340
查看次数

TypeError:google.visualization.DataTable不是构造函数

在我的网页上,我有一个谷歌地图,以及三个图表.当页面加载时,地图很好,但图表要么不加载,要么只加载一两个.继续收到错误TypeError:google.visualization.DataTable不是构造函数.

function load() {
     //map object
        var MY_MAP = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 54.870902, lng: -6.300565}, 
        zoom: 14
      });    
      //call to get and process data
      downloadUrl("Map.php", processXML);
  }  

 // 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(drawAltitudeChart());  
google.setOnLoadCallback(drawDisplacementChart());
google.setOnLoadCallback(drawDistanceChart());  



function drawAltitudeChart(){

         //console.log('hello');
         var graph = [];
          downloadUrl("Map.php", function (data){
              var xml = data.responseXML;
              var markers = xml.documentElement.getElementsByTagName("marker");
              var dataTable = new google.visualization.DataTable(); …
Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization

8
推荐指数
2
解决办法
3万
查看次数

Google Charts:如何更改饼图切片的顺序?

如何更改饼图切片生成的顺序?这是我的代码.

var DEFAULT_PIE_CHART_OPTIONS = {
        theme: 'material',
        titleTextStyle: { fontSize: 12 },
        is3D: false,
        pieSliceText: 'label',
        colors: ['#8E142E','#C3CA21','#8A972B','#6FF522','#167D13'],
        fontSize: 12,
        pieHole: 0.6,
        pieStartAngle: 180,
        height: 600,
        chartArea: { width: '100%', height: '100%', left: 0, top: 100 },
        legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } }
    };
var chartOptions = DEFAULT_PIE_CHART_OPTIONS;
        chartOptions.colors = null;
        var chartOverallPmmLevelCalculated = new google.visualization.ChartWrapper({
            'chartType': 'PieChart',
            'containerId': 'chartOverallPmmLevelCalculatedHtml',
             options: chartOptions
        });
function drawPieChart() {
            var responseDataTable = levelTableChart.getDataTable(); …
Run Code Online (Sandbox Code Playgroud)

charts google-visualization

7
推荐指数
1
解决办法
3596
查看次数

Google图表问题与Sankey图表

我有一张Sankey图表.它有2个部分 - 蔬菜和Frutis.我不想要蔬菜触手.

那可能吗?

这是截图:

问题

这是我目前的Sankey Chart代码:

<html>
  <head>
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <style>
        .my-padding {
            margin-top: 50px;
            margin-bottom: 50px;
            margin-right:50px;
        }
       </style>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows([


         [ 'Vegetables 70.2%',, 70.2],

          [ 'Fruits 29.8%', 'Orange 9%', 9 ],
          [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ],
          [ 'Fruits 29.8%', 'Banana 7.9%', 7.9 ],
          [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ],

          [ 'Orange 9%', …
Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization

7
推荐指数
1
解决办法
1126
查看次数

工具提示使用谷歌图表截止

工具提示会在某些点被截止(底部会被切断).
我该如何解决这个问题?

以下是目前的选择......

chart.draw(data, {
    width: 275, 
    height: 75, 
    legend:'none',
    gridlineColor:'white',
    pointSize:2, 
    chartArea:{left:0},
    chartArea:{width:275},
    colors:['red','green', 'blue']});    
Run Code Online (Sandbox Code Playgroud)

charts google-visualization

6
推荐指数
1
解决办法
1270
查看次数

Google Charts图例位置不起作用

这让我疯了.我无法让传说完全移动.这将生成一个图表,其右侧是默认位置的图例.

我显然已将传说位置声明为"底部",但它不起作用.然而,这正是文档所说的.

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

function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
  ['Smith',		35,		{v: -.1126,   f: '-11.26%'} ],
  ['Chalk',		53,		{v: -.0126,   f: '-1.26%'}  ],
  ['Hank',		84,		{v: -.0252,   f: '-2.52%'}  ],
  ['Jordan',	46, 	{v: .0688,    f: '6.88%'}   ],
  ['Bernie',	1,  	{v: 0,        f: '-'}       ],
  ['Ralph',		105,	{v: -.0548,   f: '-5.48%'}  ]
]);

var options = {
  series: {
    0: {axis: 'Quotes'},
    1: {axis: 'Percent'}
  },
  axes: {
    y: {
      Quotes: {label: …
Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization

6
推荐指数
1
解决办法
5292
查看次数

Google图表图例 - 重叠文字

我在我的页面中使用谷歌图表,但图例文字是重叠的,如图所示:

在此输入图像描述

这是我的代码:

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

dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");

for (var i = 0; i < dados.length; i++) {
  var temp = new Date(dados[i].DT_FIM);

  dataTable.addRow([new Date(temp.getFullYear(), temp.getMonth())
                    ,dados[i].TON_HORA
                    ,dados[i].TON_HORA_EQUIV
                    ,dados[i].PES_LIQUI_UNMET]);
}

var date_formatter = new google.visualization.DateFormat({
  pattern: "MMM/yyyy"
});

date_formatter.format(dataTable, 0);

var options = {
  hAxis: {title: 'Período (mês/ano)'},
  series: {0: {type: 'line', targetAxisIndex:0},
           1: {type: 'line', targetAxisIndex:0},
           2: { type: 'bars', targetAxisIndex: 1 }
          },
  legend: { position: "top", textStyle: { …
Run Code Online (Sandbox Code Playgroud)

charts google-visualization

6
推荐指数
1
解决办法
3191
查看次数

调整Google图表的大小以填充div的宽度和高度

刚刚开始使用Google图表,我正在尝试创建一个填充可用空间的折线图.似乎图表被锁定在某个宽高比中,但无论我为图表和图表div元素更改高度和宽度属性,结果都与我的尺寸不匹配.

谷歌图表是固定的,还是我缺少的覆盖或宽高比选项?

你可以在这里找到一个例子:

http://www.walkingcarpet.net/graphs/unemployment-rate/

谢谢!

html css jquery charts google-visualization

6
推荐指数
1
解决办法
8330
查看次数

在 Google Charts ScatterChart 上画一条线

我有一个 ScatterChart,我需要在其中绘制一条对角线(函数 y=x)作为视觉辅助。是否可以 ?如果是这样,我该怎么办?

javascript charts google-visualization scatter-plot

6
推荐指数
1
解决办法
4116
查看次数

Google Chart 未占用 100% 的空间

首先,对这个例子大喊大叫:https : //www.c-sharpcorner.com/UploadFile/ca9151/google-charts-api-using-database-in-Asp-Net/ 如果你想要一个简单的演练构建谷歌图表,那就完美了。

在说......在那个例子中,在我的项目中......我无法让图表从指定部分的左侧开始。它不断缩进。当我隐藏轴标签时,情况会更糟,因为由于缺少单词,空间会变得更大。

在此处输入图片说明

有谁知道如何让它们占据 100% 的宽度?(在图像中,我希望图表从红线开始,一直到 div 的另一侧)

提前致谢。

charts google-visualization

6
推荐指数
1
解决办法
1618
查看次数