Добавить общий ярлык ChartWrapper Google Chart - PullRequest
Новая
       79

Добавить общий ярлык ChartWrapper Google Chart

2 голосов
/ 29 мая 2020

Как я могу добавить итоговую метку для каждого столбца в диаграмму Google ChartWrapper? Я попытался выполнить поиск в документации из диаграмм Google, но я новичок в диаграммах Google, и это не так просто для меня.

Ссылка на изображение ниже, это пример, который я хочу. пример Я хочу

Следуйте моему приведенному ниже коду, это простой код. 

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

1 Ответ

1 голос
/ 02 июня 2020

, чтобы добавить метки над полосами, вы можете использовать роль столбца аннотации . 

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

РЕДАКТИРОВАТЬ

в отношении положения аннотации. учитывая, что мы используем нулевое значение для столбца, для которого предназначена аннотация, позиция задается опцией -> annotations.stem.length = 100, что означает, что она всегда будет на 100 пикселей от нижней части диаграммы.

до сделайте динамическое положение c, нам нужно удалить параметр length и присвоить столбцу значение больше нуля. значение столбца должно быть максимальным значением свечей.

чтобы найти максимальное значение, мы можем использовать метод таблицы данных -> 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);
}

, чтобы аннотация отображалась в верхней части столбца, добавьте параметр -> 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>
...