Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2017, 14:04
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

Возможно ли подключить google-charts?
Понравилась диаграмма "Creating Material column charts" ( https://developers.google.com/chart/...ry/columnchart ). Хотел бы у себя в проекте задействовать.
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2017, 14:13
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

okuznetsov1,
http://angular-google-chart.github.i...amples/column/
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2017, 14:44
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

Сообщение от destus Посмотреть сообщение
okuznetsov1,
http://angular-google-chart.github.i...amples/column/
Видел этот вариант - не понравилось то как массив формируется.

А можно ли как-то обернуть в angular-приложение именно google-charts, а не использовать какие либо другие библиотеки?
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2017, 15:11
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

okuznetsov1,
возможно, только надо за книжками посидеть...https://github.com/angular-google-ch...evelopment/src
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2017, 15:18
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

okuznetsov1,
http://jsfiddle.net/jwn0bmth/
Ответить с цитированием
  #6 (permalink)  
Старый 03.03.2017, 20:39
Аспирант
Отправить личное сообщение для okuznetsov1 Посмотреть профиль Найти все сообщения от okuznetsov1
 
Регистрация: 02.11.2016
Сообщений: 65

Сообщение от destus Посмотреть сообщение
okuznetsov1,
http://jsfiddle.net/jwn0bmth/
спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 23.03.2017, 12:41
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 44

Продолжу тему. Подключил google-chart, всё работает. Теперь хочу добавить этому элементу css класс (в самом простом случае - для размещения по центру, слева-справа и т.д.). Не получается. Не работает как html-тег align, так и более удобное решение с add.listener на draw('ready').

ссылка на пример:
http://stackoverflow.com/questions/1...-google-charts

Код.

<div ng-controller="MyCtrl">
        <div id="chart_div" ><table>123</table></div>

        <button id="change-chart">Change to Classic</button>
    </div>


app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.myctrl = MyCtrl();
}]);

function MyCtrl($scope) {
    google.charts.load('current', {'packages':['line', 'corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Month');
        data.addColumn('number', "Average Temperature");
        data.addColumn('number', "Average Hours of Daylight");

        data.addRows([
            [new Date(2014, 0),  -.5,  5.7],
            [new Date(2014, 1),   .4,  8.7],
            [new Date(2014, 2),   .5,   12],
            [new Date(2014, 3),  2.9, 15.3],
            [new Date(2014, 4),  6.3, 18.6],
            [new Date(2014, 5),    9, 20.9],
            [new Date(2014, 6), 10.6, 19.8],
            [new Date(2014, 7), 10.3, 16.6],
            [new Date(2014, 8),  7.4, 13.3],
            [new Date(2014, 9),  4.4,  9.9],
            [new Date(2014, 10), 1.1,  6.6],
            [new Date(2014, 11), -.2,  4.5]
        ]);

        var materialOptions = {
            chart: {
                title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
            },
            width: 900,
            height: 500,
            series: {
                // Gives each series an axis name that matches the Y-axis below.
                0: {axis: 'Temps'},
                1: {axis: 'Daylight'}
            },
            axes: {
                // Adds labels to each axis; they don't have to match the axis names.
                y: {
                    Temps: {label: 'Temps (Celsius)'},
                    Daylight: {label: 'Daylight'}
                }
            }
        };

        var classicOptions = {
            title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
            width: 900,
            height: 500,
            // Gives each series an axis that matches the vAxes number below.
            series: {
                0: {targetAxisIndex: 0},
                1: {targetAxisIndex: 1}
            },
            vAxes: {
                // Adds titles to each axis.
                0: {title: 'Temps (Celsius)'},
                1: {title: 'Daylight'}
            },
            hAxis: {
                ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                    new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                    new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                ]
            },
            vAxis: {
                viewWindow: {
                    max: 30
                }
            }
        };

        function drawMaterialChart() {
            var materialChart = new google.charts.Line(chartDiv);
            // HERE'S HOW TO SUBSCRIBE TO THE EVENT
            google.visualization.events.addListener(materialChart, 'ready', resetTableStyle);//изменить стиль перед отправкой
            materialChart.draw(data, materialOptions);
            button.innerText = 'Change to Classic';
            button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
            var classicChart = new google.visualization.LineChart(chartDiv);
            google.visualization.events.addListener(classicChart, 'ready', resetTableStyle);//изменить стиль перед отправкой
            classicChart.draw(data, classicOptions);
            button.innerText = 'Change to Material';
            button.onclick = drawMaterialChart;
        }

        // HERE'S THE JAVASCRIPT TO SET YOUR CSS
        // NOTE TOGGLING A CSS CLASS HERE IS PROBABLY CLEANEST
        function resetTableStyle(){
            var myDiv = document.getElementById('chart_div');
            var myTable = myDiv.getElementsByTagName('table')[0];
            myTable.style.margin = 'auto';
            myTable.align = "center";
        }
        drawMaterialChart();
    }
}


Есть вопрос, почему в примере стили редактируются для
var myTable = myDiv.getElementsByTagName('table')[0];
, если элемент графика живёт в
var myDiv
. Пробовал разные варианты, классы не применяются.
Ответить с цитированием
  #8 (permalink)  
Старый 24.05.2017, 16:15
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 44

Тэкс. Идём дальше. Пользую "Annotation Chart". Всё прелестно, но шрифт легенды, названия и аннотации очень мелкий. Захотел его увеличить, но не тут-то было. В документации на "Annotation Graph"
https://developers.google.com/chart/...nnotationchart
про стиль шрифта ничего нет. Аналогичные настройки из других графиков (см. ниже) не работают... ни одна. Что посоветуете?

var options = {
            displayAnnotations: true,
            displayZoomButtons: true,
            annotationsWidth: 15,
            thickness: 2,
            //
            titleTextStyle: {
                        // color: <string>,    // any HTML string color ('red', '#cc00cc')
                    fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 12, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: false   // true of false
            },
            hAxis : {
                textStyle : {
                    fontSize: 30 // or the number you want
                }
            },
            legend: {position: 'top', textStyle: {color: 'blue', fontSize: 16}},
            legendtextStyle: {
                    fontName: "Times New Roman",
            fontSize: 16,
            },
            annotations: {
                textStyle: {
                    fontName: 'Times-Roman',
                    fontSize: 18,
                    bold: true,
                    italic: true,
                    color: '#871b47',     // The color of the text.
                    auraColor: '#d799ae', // The color of the text outline.
                    opacity: 0.8          // The transparency of the text.
                }
            },
            fontsize: "20",
            fontSize: "20",
            hAxistitleTextStyle: {color: 'black', fontName: 'Arial', fontSize: "20"},

            // zoomEndTime: new Date(2314, 2, index),
        };
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вставить переменную в Google Charts? Иван2017 Библиотеки/Тулкиты/Фреймворки 1 15.02.2017 14:33
Google Charts optron Общие вопросы Javascript 1 25.01.2015 18:43
Google charts и Jquery Gurchava jQuery 1 12.05.2014 08:18
Настройка Google Charts mdlv jQuery 0 16.10.2013 11:26
Обновление графика Google Charts teandr AJAX и COMET 0 29.06.2010 08:38