注释Google 图表API

Question

我正在尝试使用 Google 图表 API 来构建瀑布图。我注意到 Candlestick/Waterfall 图表不支持注释。

google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
            data.addColumn('string', 'Category');
    data.addColumn('number', 'MinimumLevel');
    data.addColumn('number', 'MinimumLevel1');
    data.addColumn('number', 'MaximumLevel');
    data.addColumn('number', 'MaximumLevel1');
    data.addColumn({type: 'number', role: 'tooltip'});
    data.addColumn({type: 'string', role: 'style'});
    data.addColumn({type: 'number', role: 'annotation'});

    data.addRow(['Category 1', 0 , 0, 5, 5, 5,'gray',5]);
    data.addRow(['Category 2', 5 , 5, 10, 10, 10,'red',10]);
    data.addRow(['Category 3', 10 , 10, 15, 15, 15,'blue',15]);
    data.addRow(['Category 4', 15 , 15, 10, 10, 10,'yellow',10]);
    data.addRow(['Category 5', 10 , 10, 5, 5, 5,'gray',5]);

    var options = {
      legend: 'none',
      bar: { groupWidth: '60%' } // Remove space between bars.
    };

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

我想将第 5 列的值放在每个烛台的顶部。它应该是这样的：

有办法吗？

谢谢

Answer 1

碰巧，我运行这周遇到了同样的问题

所以我在 'animationfinish' 活动期间添加了自己的注释

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var dataChart = new google.visualization.DataTable({"cols":[{"label":"Category","type":"string"},{"label":"Bottom 1","type":"number"},{"label":"Bottom 2","type":"number"},{"label":"Top 1","type":"number"},{"label":"Top 2","type":"number"},{"role":"style","type":"string","p":{"role":"style"}}],"rows":[{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},{"c":[{"v":"Contract Labor"},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"}]},{"c":[{"v":"Contract Non Labor"},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"}]},{"c":[{"v":"Materials and Equipment"},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"}]},{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}]});

  var waterFallChart = new google.visualization.ChartWrapper({
    chartType: 'CandlestickChart',
    containerId: 'chart_div',
    dataTable: dataChart,
    options: {
      animation: {
        duration: 1500,
        easing: 'inAndOut',
        startup: true
      },
      backgroundColor: 'transparent',
      bar: {
        groupWidth: '85%'
      },
      chartArea: {
        backgroundColor: 'transparent',
        height: 210,
        left: 60,
        top: 24,
        width: '100%'
      },
      hAxis: {
        slantedText: false,
        textStyle: {
          color: '#616161',
          fontSize: 9
        }
      },
      height: 272,
      legend: 'none',
      tooltip: {
        isHtml: true,
        trigger: 'both'
      },
      vAxis: {
        format: 'short',
        gridlines: {
          count: -1
        },
        textStyle: {
          color: '#616161'
        },
        viewWindow: {
          max: 24000000,
          min: 16000000
        }
      },
      width: '100%'
    }
  });

  google.visualization.events.addOneTimeListener(waterFallChart, 'ready', function () {
    google.visualization.events.addListener(waterFallChart.getChart(), 'animationfinish', function () {
      var annotation;
      var chartLayout;
      var container;
      var numberFormatShort;
      var positionY;
      var positionX;
      var rowBalance;
      var rowBottom;
      var rowFormattedValue;
      var rowIndex;
      var rowTop;
      var rowValue;
      var rowWidth;

      container = document.getElementById(waterFallChart.getContainerId());
      chartLayout = waterFallChart.getChart().getChartLayoutInterface();
      numberFormatShort = new google.visualization.NumberFormat({
        pattern: 'short'
      });
      rowIndex = 0;
      Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
        switch (rect.getAttribute('fill')) {
          // use colors to identify bars
          case '#922b21':
          case '#1e8449':
          case '#007fff':
            rowWidth = parseFloat(rect.getAttribute('width'));
            if (rowWidth > 2) {
              rowBottom = waterFallChart.getDataTable().getValue(rowIndex, 1);
              rowTop = waterFallChart.getDataTable().getValue(rowIndex, 3);
              rowValue = rowTop - rowBottom;
              rowBalance = Math.max(rowBottom, rowTop);
              positionY = chartLayout.getYLocation(rowBalance) - 6;
              positionX = parseFloat(rect.getAttribute('x'));
              rowFormattedValue = numberFormatShort.formatValue(rowValue);
              if (rowValue < 0) {
                rowFormattedValue = rowFormattedValue.replace('-', '');
                rowFormattedValue = '(' + rowFormattedValue + ')';
              }
              annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
              $(annotation).text(rowFormattedValue);
              annotation.setAttribute('x', (positionX + (rowWidth / 2)));
              annotation.setAttribute('y', positionY);
              annotation.setAttribute('font-weight', 'bold');
              rowIndex++;
            }
            break;
        }
      });
    });
  });

  $(window).resize(function() {
    waterFallChart.draw();
  });
  waterFallChart.draw();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

我通过向隐藏的散点图添加注释来向烛台图表添加注释。您可以通过更改绘图来准确设置您希望注释所在的位置。

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

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Low');
        data.addColumn('number', 'Open');
        data.addColumn('number', 'Close');
        data.addColumn('number', 'High');
        data.addColumn('number'); //scatter plot for annotations
        data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
        data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
        var high, low, open, close = 160;
        for (var i = 0; i < 10; i++) {
            open = close;
            close += ~~(Math.random() * 10) * Math.pow(-1, ~~(Math.random() * 2));
            high = Math.max(open, close) + ~~(Math.random() * 10);
            low = Math.min(open, close) - ~~(Math.random() * 10);
            annotation = '$' + close;
            annotation_text = 'Close price: $' + close;
            data.addRow([new Date(2014, 0, i + 1), low, open, close, high, high, annotation, annotation_text]);
        }

        var view = new google.visualization.DataView(data);
        var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));

        chart.draw(view, {
            height: 400,
            width: 600,
            explorer: {},
            chartArea: {
                left: '7%',
                width: '70%'
            },
            series: {
                0: {
                    color: 'black',
                    type: 'candlesticks',
                },
                1: {
                    type: 'scatter',
                    pointSize: 0,
                    targetAxisIndex: 0,
                },
            },
            candlestick: {
                color: '#a52714',
                fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
                risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
            },
        });

    }

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

注释Google 图表API

Annotation Google Chart API

javascript

charts

waterfall

google-visualization

candlestick-chart