Линейная диаграмма Google - по умолчанию показывает значения данных в точках - PullRequest
Новая
       12

Линейная диаграмма Google - по умолчанию показывает значения данных в точках

0 голосов
/ 05 июля 2018

Я хочу показать значения данных на линейном графике, то есть, которые появляются при наведении мыши, мне нужно, чтобы все они отображались по умолчанию. Я попробовал решение здесь Google Charts API: всегда отображать значения точек данных на графике 

data.addColumn({type: 'number', role: 'annotation'});

Я добавил это в свой код (я не уверен, куда именно его поместить), но он ничего не изменил.

Вот часть моего кода: 

<!DOCTYPE html>
<html>
<head>
    <title>Week/Orders</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([

                ['Week','Orders'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Week"]."', ".$row["Orders"]."],";
                    }
                ?>

               ]);


            var options = {
                title: 'Week Vs Orders',
                'width':1700,
                'height':600,

                legend: { position: 'bottom' }
                     };

               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options);  

        }

    </script>
</head>
<body>
     <div id="curvechart" style="width: 900px; height: 400px"></div>
</body>
</html>

У меня есть два значения; Неделя и Заказы. Мне нужно только значение «Порядок», отображаемое на графике по умолчанию. Как я могу это сделать? Благодарю.

1 Ответ

0 голосов
/ 05 июля 2018

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

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}]);

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
    var data = google.visualization.arrayToDataTable([
        ['Week','Orders'],
        ['1', 5],
        ['2', 6],
        ['3', 4]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'
    }]);

    var options = {
        title: 'Week Vs Orders',
        width: 1700,
        height: 600,
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('curvechart'));

    chart.draw(view, options);  // <-- use data view
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curvechart"></div>
...