添加总标签ChartWrapper谷歌图表

问题描述 投票：2回答：1

我如何才能在每一列添加总标签到ChartWrapper谷歌图表？我试图从谷歌图表搜索到文档，但我是新的谷歌图表，对我来说不是那么容易。

下面的图片链接是我想要的一个例子。我想要的例子

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

<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>
javascript charts google-visualization
1个回答
1
投票

要在条形图上面添加标签，你可以使用一个 "标签"。注释栏作用. 

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

然而，在这种情况下，蜡烛棒系列不支持注释。你可以通过查看 数据格式 为每个图表类型。

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

{ 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>

编辑

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

为了使位置动态化，我们需要删除"--&gt "选项。length 选项，并赋予该列一个大于零的值，该列的值应该是蜡烛图的最大值。

为了找到最大值，我们可以使用数据表方法--&gt。getColumnRange(colIndex)这个方法将返回一个对象，其属性为我们提供的列的最小值& 最大值。

我们需要找到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);
}

为了确保注释显示在列的顶部，添加选项--&gt。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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.