Question

感谢此White Hat中的post ，我能够为区域图制作自定义注释。不知何故，它不适用于阶梯式面积图。

图表首先正确绘制所有内容，然后在步进区域图表中设置注释。在MutationObserver的帮助下，绘制图表时应覆盖设置，但这仅适用于面积图。

我该如何解决这个问题？

<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']
}).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: {
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      direction: 1
    },
    orientation: 'horizontal',

    // customize colum
    series: {
      0: {type: "steppedArea"},
      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);
});
  </script>
</head>

<body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>

</html>

Answer 1

阶梯区域图表的默认注释设置与普通区域图表不同

对于步进，注释出现在区域内，将颜色更改为白色，
这不是用于查找标签并移动它们的颜色

一个简单的解决方法是指定注释始终位于区域之外......

annotations: {
  alwaysOutside: true,
  ...

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

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: {
      alwaysOutside: true,
      stem: {
        length: 10
      }
    },
    title: 'Playground',
    colors: ['#007f01', '#fe0002'],
    interpolateNulls: true,
    hAxis: {
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      direction: 1
    },
    orientation: 'horizontal',

    // customize colum
    series: {
      0: {type: "steppedArea"},
      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);
});

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

带有自定义注释的Google步进区域图表

1 个答案: