Question

我对谷歌图表有点新意，我正在玩它来学习它，但我的图表有两个问题：

1）我不确定为什么没有动画的第二张图表（红色）显示

2）如何将注释行的值扩展到图表的顶部？最好的情况是价值显示在图表标题下

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data1 = new google.visualization.DataTable();

      data1.addColumn('number', 'x');
      data1.addColumn('number', 'green');

      data1.addRows([
        [0.005, 3],
        [0.006, 6],
        [0.007, 5],
        [0.008, 8],
        [0.009, 2],
        [0.010, 5],
        [0.011, 5],
        [0.012, 4],
        [0.013, 8]
      ]);

      var data2 = new google.visualization.DataTable();
      data2.addColumn('number', 'x');
      data2.addColumn('number', 'red');

      data2.addRows([
        [0.016, 5],
        [0.017, 1],
        [0.018, 3],
        [0.019, 9],
        [0.020, 4],
        [0.021, 5],
        [0.022, 7],
        [0.023, 7],
        [0.024, 3]
      ]);


      var joinedData = google.visualization.data.join(data1, data2, 'full',
        [[0, 0]], [1], [1]);

      var options = {
        title: 'Playground',
        colors: ['#007F01', '#FE0002'],
        interpolateNulls: true,
        hAxis: {
          title: 'Price',
          titleTextStyle: {
            color: '#333'
          },
          direction: 1,
          format: 'decimal'
        },
        vAxis: {
          direction: 1
        }, 
        orientation: 'horizontal', 

        // customize colum
        series: {
          0: {type: "area"},
          1: {type: "area"},
        },

        // legend: {position : 'left'},
        animation: {
          startup: true,
          duration: 1000,
          easing: 'out',
        }
      };

      var view = new google.visualization.DataView(joinedData);
      view.setColumns([0,
        1,
        {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
        },
        2,
        {
          calc: "stringify",
          sourceColumn: 2,
          type: "string",
          role: "annotation"
        }
      ]);


      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(view, options);

    }
  </script>
</head>

<body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>

</body>

</html>

在这里你可以运行它： jsfiddle

Answer 1

使用数据视图和动画时，谷歌图表中存在错误一个简单的解决方法是在绘制图表时将视图转换回数据表...

view.toDataTable()

e.g。

chart.draw(view.toDataTable(), options);

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data1 = new google.visualization.DataTable();

  data1.addColumn('number', 'x');
  data1.addColumn('number', 'green');

  data1.addRows([
    [0.005, 3],
    [0.006, 6],
    [0.007, 5],
    [0.008, 8],
    [0.009, 2],
    [0.010, 5],
    [0.011, 5],
    [0.012, 4],
    [0.013, 8]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'x');
  data2.addColumn('number', 'red');

  data2.addRows([
    [0.016, 5],
    [0.017, 1],
    [0.018, 3],
    [0.019, 9],
    [0.020, 4],
    [0.021, 5],
    [0.022, 7],
    [0.023, 7],
    [0.024, 3]
  ]);


  var joinedData = google.visualization.data.join(data1, data2, 'full',
    [[0, 0]], [1], [1]);

  var options = {
    title: 'Playground',
    colors: ['#007F01', '#FE0002'],
    interpolateNulls: true,
    hAxis: {
      title: 'Price',
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      direction: 1
    },
    orientation: 'horizontal',

    // customize colum
    series: {
      0: {type: "area"},
      1: {type: "area"},
    },

    // legend: {position : 'left'},
    animation: {
      startup: true,
      duration: 1000,
      easing: 'out',
    }
  };

  var view = new google.visualization.DataView(joinedData);
  view.setColumns([0,
    1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    }
  ]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view.toDataTable(), options);
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

＆＃13;

更新

至于扩展注释行，
你可以改变长度，
但这只会增加每个的大小，
并且它们仍然不会在顶部对齐

annotations: {
  stem: {
    length: 10
  }
},

唯一的方法是在绘制后手动修改图表你可以移动标签并增加线的高度
但这会产生两个问题

1）只要有交互性，图表就会将它们移回去，例如悬停标签或数据点

要修复，您可以使用MutationObserver
每次图表试图将它们移回时，这将覆盖设置

2）如果您使用图表方法getImageURI来获取图表的图像，则不会显示更改

要解决此问题，请使用html2canvas来获取图片而不是图表方法

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data1 = new google.visualization.DataTable();

  data1.addColumn('number', 'x');
  data1.addColumn('number', 'green');

  data1.addRows([
    [0.005, 3],
    [0.006, 6],
    [0.007, 5],
    [0.008, 8],
    [0.009, 2],
    [0.010, 5],
    [0.011, 5],
    [0.012, 4],
    [0.013, 8]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'x');
  data2.addColumn('number', 'red');

  data2.addRows([
    [0.016, 5],
    [0.017, 1],
    [0.018, 3],
    [0.019, 9],
    [0.020, 4],
    [0.021, 5],
    [0.022, 7],
    [0.023, 7],
    [0.024, 3]
  ]);


  var joinedData = google.visualization.data.join(data1, data2, 'full',
    [[0, 0]], [1], [1]);

  var options = {
    annotations: {
      stem: {
        length: 10
      }
    },
    title: 'Playground',
    colors: ['#007f01', '#fe0002'],
    interpolateNulls: true,
    hAxis: {
      title: 'Price',
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      direction: 1
    },
    orientation: 'horizontal',

    // customize colum
    series: {
      0: {type: "area"},
      1: {type: "area"},
    },

    // legend: {position : 'left'},
    animation: {
      startup: true,
      duration: 1000,
      easing: 'out',
    }
  };

  var view = new google.visualization.DataView(joinedData);
  view.setColumns([0,
    1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    }
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(container);

  var observer = new MutationObserver(moveAnnotations);
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  function moveAnnotations() {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();

    var labels = container.getElementsByTagName('text');
    var labelSize = 0;
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
          labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
          label.setAttribute('y', chartBounds.top + labelSize);
        }
      }
    });

    var stems = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(stems, function(stem) {
      if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
        var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
        stem.setAttribute('height', height);
        stem.setAttribute('y', chartBounds.top + labelSize);
      }
    });
  }

  chart.draw(view.toDataTable(), options);
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

备注：

1）移动功能（moveAnnotations）使用colors中的options来识别其余图表标签中的注释标签
图表将所有颜色更改为小写，因此必须将colors中的options更改为小写

2）移动功能还使用选项annotations.stem.length来识别注释行

Google Charts：动画不适用于一个图表，指向标题区域中的注释

1 个答案: