标签: google-visualization

我正在尝试google charts使用ajax响应表单PHP文件构建.以下是alert我的输出javascript

{"cols":[{"id":"5","label":"LISTING","type":"number"}],"rows":[{"c":[{"v":"1"}]}]}

当我使用以下代码构造图表时,我得到了错误 Data table is not defined.

function drawBarChartAll(totalclientstatus) {
        alert(totalclientstatus);
        //eval ( 'var jsonobject = totalclientstatus;'); 
        //var json = google.visualization.DataTable.toJSON(totalclientstatus)
        var data = google.visualization.DataTable(totalclientstatus);

        var options = {
            'width':670,
            'height':310,

            hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
            //chartArea:{left:20,top:20,width:"70%",height:"100%"}
        };


        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('barchartall'));
        chart.draw(data, options);
    }

我究竟做错了什么 ？我正在使用以下php来构建JSON

while ($row = mysqli_fetch_array($agent_result, MYSQL_ASSOC))
    {
        $columns …

我在页面上使用Google Visualizations量表,但重要的是它显示的值不会显示为针头正下方的标签.

我发现了两种方法.一旦您将DOM导航到规范窗口小部件并导航到SVG部分,您可以将textContent元素设置为空字符串,也可以完全删除整个文本标签实体.

function removeLabel(widget) {
    var gauge_label_parent = widget.getElementsByTagName("g")[1];
    var gauge_label = gauge_label_parent.getElementsByTagName("text")[0];
    gauge_label.textContent = "";
    // Another way of getting rid of the text: remove the element
    //    gauge_label_parent.removeChild(gauge_label);
}

问题是:这两种技术都是第一次起作用.如果我使用更新的值重新绘制仪表,则标签会重新出现,并尝试删除标签元素或设置textContent =""不会执行任何操作.

因此,而不是只能用以下内容更新值:

data.setValue(0, 1, newValue);
chart.draw(data, options);

我发现我必须稍微改变一下选项,比如:

data.setValue(0, 1, newValue);
options.minorTicks = 3; // Change the options somehow
chart.draw(data, options); // Tell gauge to draw that
options.minorTicks = 2; // Change the options back to what they were
chart.draw(data, options); // Draw again

这是一个小提琴,看看它是如何工作的.将fixLabel设置为true或false,具体取决于您是否要存在标签问题.请记住,第一次标签将(正确)丢失.更新其值时会重新显示. …

我需要根据数据库查询的结果集创建可变数量的JSON对象和JSON数组.JSON格式看起来非常类似于用于谷歌图表的以下内容.

{
“cols”: [
{"id":"","label":"year","type":"string"},
{"id":"","label":"sales","type":"number"},
{"id":"","label":"expenses","type":"number"}
],
“rows”: [
{"c":[{"v":"2001"},{"v":3},{"v":5}]},
{“c”:[{"v":"2002"},{"v":5},{"v":10}]},
{“c”:[{"v":"2003"},{"v":6},{"v":4}]},
{“c”:[{"v":"2004"},{"v":8},{"v":32}]},
{“c”:[{"v":"2005"},{"v":3},{"v":56}]}
]
}

我的问题是,我觉得这应该是一个简单的答案,如何在for循环中创建具有唯一名称的多个JSON对象？我的尝试:

for(int i=0;i<10;i++) {
    JSONObject "tempName"+i = new JSONObject();
}

类似于这个问题，但对于谷歌饼图：

如何删除 Google 饼图上切片之间的白线：

在上图中，我想删除绿色箭头突出显示的空白区域。

我的图表非常简单，如下所示：

function drawVisualization() {\n\n  var data = google.visualization.arrayToDataTable([\n    [\'week\', \'rate\'],\n    [\'1\',   0.156],\n    [\'2\',   0.232],\n    [\'3\',   0.446],\n    [\'4\',   0.832],\n    [\'5\',   0.702],\n    [\'6\',   0.773],\n    [\'7\',   0.842],\n    [\'8\',   0.413],\n    [\'9\',   0.278],\n    [\'10\',   0.323],\n    [\'11\',   0.312],\n    [\'12\',   0.309],\n    [\'13\',   0.134],\n    [\'14\',   0.137]\n  ]);\n\n  new google.visualization.LineChart(document.getElementById(\'visualization\')).\n      draw(data, {curveType: "function",\n                  width: 500, height: 400,\n                  vAxis: {maxValue: 1}}\n          );\n}\n

\xe2\x80\x8b

但我不知道如何格式化数据列以在工具提示中显示为百分比。你们可以帮忙吗？

当我将条形悬停在图表中时，有没有办法消除阴影？我可以在工具提示上执行此操作，但尚未找到在工具栏本身上执行此操作的方法。在这种情况下，蓝色或红色条本身......

我想如果可能的话，这需要在css中完成吗？函数drawBasic() {

var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population','j'],
    ['New York City, NY', 80,10],
    ['Los Angeles, CA', 80,0],
    ['Chicago, IL', 70,0],
    ['Houston, TX', 65,0],
    ['Philadelphia, PA', 17,0]
  ]);
    var num = 0;


  var options = {
    title: 'Percent of students enrolled',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Percentage',
      minValue: 100
    },
    vAxis: {
      title: 'college location'
    },
      isStacked: true
  };

https://jsfiddle.net/skinnyb/33og516L/3/

我使用饼图来显示这里的数据是我的代码我添加了以下脚本

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart', 'gauge'] });

以及我用于显示聊天的功能：-

self.DrawServiceGraph = function (obj) {
                var dataArray = new Array();
                dataArray.push(['Services', 'Total']);
                var subCat = ko.utils.arrayFirst(self.SelectedServiceSubCategoryList(), function (o) { return o.Id === obj.Id; });
                if (subCat !== undefined) {
                    $.each(subCat.SSC_List(), function (index, item) {
                        var value = parseInt(item.Value());
                        dataArray.push([item.SSC_Name, value]);
                    });

                    var data = google.visualization.arrayToDataTable(dataArray);

                    var options = {
                        title: '', height: 230, width: 330,
                        chartArea: { left: 0, width: '100%' },
                        legend: { position: 'right', alignment: …

使用以下谷歌图表，我将如何通过单击图例来隐藏一条线？它目前有两条线 Elec 和 Gas 我希望能够根据单击相应的图例来隐藏或显示每一行。我知道我必须向图表添加一个事件侦听器函数，但我有点不知道如何在这个特定的图表上做到这一点。我能找到的例子略有不同。

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Time', 'Electricity', 'Gas'],
        [new Date('2017-05-01'), 12.903, 4.624],
        [new Date('2017-05-02'), 15.82, 34.4],
        [new Date('2017-05-03'), 9.087, 29.542],
        [new Date('2017-05-04'), 11.094, 18.003],
        [new Date('2017-05-05'), 10.709, 16.573],
        [new Date('2017-05-06'), 10.547, 67.86],
        [new Date('2017-05-07'), 22.491, 4.011],
        [new Date('2017-05-08'), 14.245, 14.898],
        [new Date('2017-05-09'), 0, 0],
        [new Date('2017-05-10'), 0, 0],
        [new Date('2017-05-11'), 0, 0],
        [new Date('2017-05-12'), 0, 0],
        [new Date('2017-05-13'), 0, 0],
        [new Date('2017-05-14'), 0, 0],
        [new Date('2017-05-15'), 0, 0],
        [new Date('2017-05-16'), 0, 0], …

我正在使用绑定到Google表格的Google脚本以编程方式生成以下查询：

=query('16 Jul - 20 Jul Responses'!A1:I31, "SELECT C WHERE D = 'Available'", 0)

Google脚本中是否可以解析该查询结果的对象表示形式？我希望能够编写如下代码：

var queryString = '=query('16 Jul - 20 Jul Responses'!A1:I31, "SELECT C WHERE D = 'Available'", 0)'; var results = new Query(queryString); for(var i = 0; i < results.length; i++) { var result = results[i]; // do something }

据我所知，除非您正在使用Google Web App，否则查询对象不存在。这是真的？还是有办法实现这一想法？

根据文档，您可以Set the chart-specific events you want to listen to and the corresponding callback.使用给出的示例，效果很好（我在这里select设置了一个示例。当我尝试使用任何其他图表类型时，问题就出现了。

  {
    eventName: "click",
    callback({}) {
      console.log("clicked");
    }
  }