标签: google-chartwrapper

我正在使用谷歌图表创建一个多级甜甜圈图表.我成功创建了单级图表.但现在我必须在该图表中创建另一个图表.请帮我.还有可能以圆形形式在图表切片上写文字吗？

这是我的单个甜甜圈聊天的代码.

HTML

  <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="donutchart" style="width: 900px; height: 500px;"></div>

JS

 google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
            chartArea:{left: '100'},
         pieSliceText: 'label',
            pieStartAngle: 0,
            pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }

这里是JsFiddle的代码链接 IT应该是这样的

我有一个页面,使用LineChart与ChartRangeFilter控件显示数据.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    for (var i = 0; i < 12; i++) {
        data.addRow([new Date(2016, i,1), Math.floor(Math.random() * 200), Math.floor(Math.random() * 200)]);
    }

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                }, …

我只想将列0降序排序.我正在使用此代码:

var table = new google.visualization.ChartWrapper({
  chartType: 'Table',
  containerId: 'chart_table_a',
  options: {
    sortColumn: 0,
    sortAscending: false,
    sort: 'enable'
  }
});

我不想让表格可排序,但代码只适用于sort: 'enable'.

有没有办法只是排序而不使表格可以排序？

我正在使用angular-google-chart创建一个面积图.我试图为特定区域显示不同的颜色.但是你可以看到红色和绿色线条(区域)的区域与蓝色区域重叠.配置有问题吗？

"data": {
    "cols": [{
        "id": "date",
        "label": "Date",
        "type": "string",
        "p": {}
    }, {
        "id": 'sd0',
        "label": 'sdo',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1',
        "label": 'sd1',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2',
        "label": 'sd2',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3',
        "label": 'sd3',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1Neg',
        "label": 'sd1Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2Neg',
        "label": 'sd2Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3Neg',
        "label": 'sd3Neg',
        "type": …

如何在谷歌可视化图表中添加图像.

下面是我正在尝试的脚本

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('example4.2');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President', 'George Washington',  new Date(0,0,0,12,0,0),  new Date(0,0,0,12,3,0) ],
    [ 'President', '<img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&g=1">John Adams', new Date(0,0,0,12,3,3),  new Date(0,0,0,12,14,0) ],
    [ 'President', 'Thomas Jefferson', new Date(0,0,0,12,15,1),  new Date(0,0,0,12,28,0) ],
    [ 'President', '', new Date(0,0,0,13,0, 0), …

目的: 显示折线图,其中包含选择要查看的行的选项.换句话说,假设有一个折线图,我有2行,所以我想要3个选项,同时显示两个,只显示第一个或仅显示第二个.

类似于此处显示的功能,但用于折线图: http ://code.google.com/apis/ajax/playground/？type = visualization #categoryfilter_control

码:

    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],
    ['M',   1, …

script-src: 'unsafe-eval'出于安全考虑,我已从CSP标头中删除了.我注意到这已经破坏了Google Charts.图表现在无法呈现并显示错误:

Invalid JSON string: {}

任何想法或谷歌只是吹嘘它并允许他们的图书馆不安全eval？我的地图遇到了同样的问题,不得不使用不同的库.

我是谷歌可视化的新手.我正在开发一个完整的仪表板,如谷歌完整的仪表板示例

按照示例,我声明如下数据:

var data = google.visualization.arrayToDataTable([
    ['CodiceCliente', 'Cliente', 'QtàO13', 'QtàO14','UM'],
        ['0000038893', 'Coop',300,350, 'CT'] .... ]);

现在我想从服务器加载数据.我像这样创建一个Json:

{
"cols": [
    {"id": "codiceCliente","label": "Cod. Cliente","type": "string"},
    {"id": "clienteDesc","label": "Cliente","type": "string"},
    {"id": "qtaO13","label": "Qtà O13","type": "number"},
    {"id": "qtaO14","label": "Qtà O14","type": "number"},
    {"id": "um","label": "UM","type": "string"}
       ],
"rows": [
    {
        "c": [
            {"v": "0000038893"},
            {"v": "Coop"},
            {"v": "300"},
            {"v": "350"},
            {"v": "CT"} ]
        }, 
        {.... }, ... ]}

在html页面中,我使用此代码从服务器获取数据:

 var jsonData = $.ajax({
      url: "getJson.do",
      dataType:"json",
      async: false
      }).responseText;
  var data = google.visualization.DataTable(jsonData); …

想知道是否有人可以提供帮助,我正在尝试使用堆叠条和两条线创建谷歌图表.我能够创建一条线,但不知道如何在同一图表中添加另一条线.我想将"Average2"显示为折线图.

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador',   'Average1' , 'Average2'],
    ['April',  165,      938, 614.6 , 400],
    ['May',  135,      1120,  682 , 500],
    ['June',  157,      1167,  623, 600],
    ['July',  139,      1110,  609.4, 450],
    ['August',  136,      691,   569.6 , 700]
  ]);

  var options = {
    title : 'Month (Q2-Q1 2015)',
    vAxis: {title: ""},
    hAxis: {title: ""},
      isStacked: true,
    seriesType: "bars",
    series: {2: {type: "line"}},
 
  };

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

不知何故,我无法为水平轴的文字着色.这是我为选项设置的:

var options = {
    colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
    timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
            barLabelStyle: {  fontSize: 9 }  }
    hAxis: {
        textStyle:{color: '#FFF'}
    }
};

截图:

完整代码:

var container = document.getElementById('timetracking_Dennis');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ '#5700', 'Vernieuwing …