添加总标签 ChartWrapper Google 图表

Question

如何将每列的总标签添加到 ChartWrapper google 图表？我尝试从 google 图表中搜索文档，但我是 google 图表中的新手，对我来说并不那么容易。

下图link就是我要的例子。 example I want

按照我下面的代码，这是一个简单的代码。

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            callback: drawChart_var,
            packages: ['corechart']
        });
        function drawChart_var() {
            var dataChart = new google.visualization.arrayToDataTable(
                [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' },
                { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' },
                { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } }],
                ['VAR', 0, 0, 3.42, 0, '#EEB14C'],['MIX', 0, 3.42, 3.73, 0, '#69AA51'],
                ['BNS', 0, 3.73, 3.42, 0, '#D53C38'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38'],
                ['OTHER', 0, 2.34, 2.69, 0, '#69AA51'],['CORP', 0, 2.69, 0.7, 0, '#D53C38'],
                ['COST', 0, 0.7, 1.94, 0, '#69AA51'],['PNL', 0, 1.94, 0, 0, '#EEB14C']]
            );
            var options = {
                animation: {duration: 1500,easing: 'inAndOut',startup: true},
                backgroundColor: 'transparent',bar: {group: {width: '85%'}},
                chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: "100%",height: "70%"},
                hAxis: {textStyle: {fontSize: 12}},
                height: 400,
                legend: 'none',
                seriesType: 'bars',
                series: {0: {type: 'candlesticks'}},
                tooltip: {isHtml: true,trigger: 'both'},
                vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}},
                width: '100%',
                annotations: {stem: {color: "transparent",length: 100},
                textStyle: {color: "#000000",fontSize: 16,}}
            };
            var chart = new google.visualization.ChartWrapper();
            chart.setChartType('ComboChart');
            chart.setDataTable(dataChart);
            chart.setContainerId('chart_var');
            chart.setOptions(options);
            chart.draw();
        }
    </script>
</head>
<body>
    <div id="chart_var"></div>
</body>
</html>

Answer 1

要在条形上方添加标签，您可以使用 annotation column role。

{ role: 'annotation', type: 'string' }

但是，在这种情况下，烛台系列不支持注释。
您可以通过查看每种图表类型的 data format 来检查支持哪些角色。

因此，我们需要添加第二个条形系列，然后添加注释列。

{ label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }

请参阅以下工作示例，对于条形系列，我们只使用零值...

google.charts.load('current', {
  callback: drawChart_var,
  packages: ['corechart']
});
function drawChart_var() {
  var dataChart = new google.visualization.arrayToDataTable(
    [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' },
    { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' },
    { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } },
    { label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }],
    ['VAR', 0, 0, 3.42, 0, '#EEB14C', 0, '3.42'],['MIX', 0, 3.42, 3.73, 0, '#69AA51', 0, '0.31'],
    ['BNS', 0, 3.73, 3.42, 0, '#D53C38', 0, '-0.31'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38', 0, '-1.08'],
    ['OTHER', 0, 2.34, 2.69, 0, '#69AA51', 0, '0.35'],['CORP', 0, 2.69, 0.7, 0, '#D53C38', 0, '-1.99'],
    ['COST', 0, 0.7, 1.94, 0, '#69AA51', 0, '1.24'],['PNL', 0, 1.94, 0, 0, '#EEB14C', 0, '1.94']]
  );
  
  var options = {
    animation: {duration: 1500,easing: 'inAndOut',startup: true},
    backgroundColor: 'transparent',bar: {group: {width: '85%'}},
    chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: "100%",height: "70%"},
    hAxis: {textStyle: {fontSize: 12}},
    height: 400,
    legend: 'none',
    seriesType: 'bars',
    series: {0: {type: 'candlesticks'}},
    tooltip: {isHtml: true,trigger: 'both'},
    vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}},
    width: '100%',
    annotations: {stem: {color: "transparent",length: 100},
    textStyle: {color: "#000000",fontSize: 16,}}
  };
 
  var chart = new google.visualization.ChartWrapper();
  chart.setChartType('ComboChart');
  chart.setDataTable(dataChart);
  chart.setContainerId('chart_var');
  chart.setOptions(options);
  chart.draw();
}

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

编辑

至于注释的位置。假设我们对注释所在的列使用零值，位置由选项设置 --> annotations.stem.length = 100 这意味着它将始终距离图表底部 100 像素。

要使位置动态，我们需要删除 length 选项，并给该列一个大于零的值。列值应该是烛台的最大值。

要找到最大值，我们可以使用数据table方法--> getColumnRange(colIndex) 此方法将 return 一个对象，该对象具有我们提供的列的最小值和最大值的属性。

我们需要找到 Base 2 和 Base 3 列之间的最大值。

// find max height
var maxBase2 = dataChart.getColumnRange(2);
var maxBase3 = dataChart.getColumnRange(3);
var maxColumn = Math.max(maxBase2.max, maxBase3.max);

然后用最大值更新我们的注释列。

// update column values to max
for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
  dataChart.setValue(i, 6, maxColumn);
}

确保注释显示在列的顶部，添加选项 --> alwaysOutside

annotations: {
  alwaysOutside: true,
  stem: {color: 'transparent'},
  textStyle: {color: '#000000',fontSize: 16}
}

再次删除 length 选项。

并将列系列的颜色设置为透明。

  1: {color: 'transparent'}

这将导致注释始终出现在烛台上方。

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

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

  var dataChart = new google.visualization.arrayToDataTable(
    [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' },
    { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' },
    { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } },
    { label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }],
    ['VAR', 0, 0, 3.42, 0, '#EEB14C', 0, '3.42'],['MIX', 0, 3.42, 3.73, 0, '#69AA51', 0, '0.31'],
    ['BNS', 0, 3.73, 3.42, 0, '#D53C38', 0, '-0.31'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38', 0, '-1.08'],
    ['OTHER', 0, 2.34, 2.69, 0, '#69AA51', 0, '0.35'],['CORP', 0, 2.69, 0.7, 0, '#D53C38', 0, '-1.99'],
    ['COST', 0, 0.7, 1.94, 0, '#69AA51', 0, '1.24'],['PNL', 0, 1.94, 0, 0, '#EEB14C', 0, '1.94']]
  );

    // find max height
    var maxBase2 = dataChart.getColumnRange(2);
    var maxBase3 = dataChart.getColumnRange(3);
    var maxColumn = Math.max(maxBase2.max, maxBase3.max);

    // update column values to max
    for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
      dataChart.setValue(i, 6, maxColumn);
    }

  var options = {
    animation: {duration: 1500,easing: 'inAndOut',startup: true},
    backgroundColor: 'transparent',bar: {group: {width: '85%'}},
    chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: '100%',height: '70%'},
    hAxis: {textStyle: {fontSize: 12}},
    height: 400,
    legend: 'none',
    seriesType: 'bars',
    series: {
      0: {type: 'candlesticks'},
      1: {color: 'transparent'}
    },
    tooltip: {isHtml: true,trigger: 'both'},
    vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}},
    width: '100%',
    annotations: {
      alwaysOutside: true,
      stem: {color: 'transparent'},
      textStyle: {color: '#000000',fontSize: 16}
    }
  };

  var chart = new google.visualization.ChartWrapper();
  chart.setChartType('ComboChart');
  chart.setDataTable(dataChart);
  chart.setContainerId('chart_var');
  chart.setOptions(options);
  chart.draw();
}

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

添加总标签 ChartWrapper Google 图表

Add total label ChartWrapper Google Chart

javascript

charts

google-visualization