вертикальная эталонная линия в визуализации временной шкалы google

Question

Привет, я использую визуализацию google для рисования диаграммы временной шкалы на моем веб-сайте. Он работает отлично. Но есть одна мелочь, которая меня беспокоит. Я хочу отобразить вертикальную линию в области диаграммы для представления текущей даты. Пожалуйста, дайте мне знать любые решения.

Мой код:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script> 

<script type="text/javascript"> 
google.setOnLoadCallback(drawChart); 
function drawChart() { 

    var container = document.getElementById('example3.1'); 
    var chart = new google.visualization.Timeline(container); 

    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn({ type: 'string', id: 'Position' }); 
    dataTable.addColumn({ type: 'string', id: 'Name' }); 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
    dataTable.addRows([ 
    [ 'President',   'George Washington', new Date(2014, 3, 29), new Date(2014, 4, 3)], 
    [ 'President',   'John Adams',  new Date(2014, 2, 3), new Date(2014, 3, 3)], 
    [ 'President',   'Thomas Jefferson', new Date(2014, 2, 3), new Date(2014, 5, 3)], 
    [ 'Vice President',  'John Adams',  new Date(2014, 3, 20), new Date(2014, 5, 3)], 
    [ 'Vice President',  'Thomas Jefferson', new Date(2014, 2, 3), new Date(2014, 6, 3)], 
    [ 'Vice President',  'Aaron Burr',  new Date(2014, 2, 3), new Date(2014, 2, 3)], 
    [ 'Vice President',  'George Clinton', new Date(2014, 2, 3), new Date(2014, 2, 19)], 

    ]); 

    chart.draw(dataTable); 
} 

</script> 

<div id="example3.1" style="width: 1000px; height: 200px;"></div> 

Назначение Результат: Зеленая линия представляет собой текущую дату

Edit:

Если это невозможно, пожалуйста, предложить какой-либо другой API, который может достичь этого.

Answer 1

Используйте столбец роли "аннотации" в столбце домена (даты). В настройках диаграммы установите annotation.<annotation column index>.style вариант 'line':

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Date', {role: 'annotation'}, 'Value'], 
     [new Date(2014, 1, 10), null, 5], 
     [new Date(2014, 1, 11), null, 4], 
     [new Date(2014, 1, 12), null, 3], 
     [new Date(2014, 1, 13), null, 7], 
     [new Date(2014, 1, 14), null, 5], 
     [new Date(2014, 1, 15), null, 6], 
     [new Date(2014, 1, 16), null, 9], 
     [new Date(2014, 1, 17), null, 2], 
     [new Date(2014, 1, 18), null, 2], 
     [new Date(2014, 1, 19), 'Today', 4], 
     [new Date(2014, 1, 20), null, 6], 
     [new Date(2014, 1, 22), null, 5], 
     [new Date(2014, 1, 23), null, 8], 
     [new Date(2014, 1, 24), null, 8] 
    ]); 

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
    chart.draw(data, { 
     width: 500, 
     height: 400, 
     annotation: { 
      1: { 
       style: 'line' 
      } 
     } 
    }); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization}); 

смотри пример здесь: http://jsfiddle.net/asgallant/r37uf/

Answer 2

Я была такая же проблема сам, не мог найти что-либо в Интернете (хотя это может действительно существуют) и Я как бы решил проблему, наложив плавающий div в виде вертикальной линии, которая расположена относительно следующим образом:

Ширина графика временной шкалы (минус ширина метки строки) связана с разницей между минимумом -максимальные даты, отображаемые на графике. Предполагая, что сегодняшняя дата будет где-то между датами min-max, тогда соотношение (today - min date)/(max date - min date) равно отношению (current date line position)/(chart width - label width). Уловка заключается в том, что, если вы не можете каким-либо образом установить ширину ярлыка на определенный номер (который вы затем можете использовать для расчета эффективной ширины диаграммы), вы получите «сдвинутую» сегодняшнюю строку.

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

Надежда это помогает, Nikolas

Answer 3

Создать первую задачу, чтобы представить текущую дату:

 dataTable.addRows([ 
['', 'Hoy', new Date(2014,9,2), new Date(2014,9,2) ], 

Создать функцию с JQuery, чтобы сделать эту задачу больше:

function MarcarHoy (div, filas){ 
    $('#'+div+' text:contains("Hoy")').css('font-size','11px').attr('fill','#A6373C').prev().first().attr('height',filas*41+'px').attr('width','1px').attr('y','0'); 
    } 

Вызов функции:

chart.draw(dataTable, options); 
    MarcarHoy('example1',23); 
    google.visualization.events.addListener(chart, 'onmouseover', function(obj) { 
    MarcarHoy('example1'); 
    }); 
} 

Результат:

Источник: Viviendo en la Era de la Web 2.0

Answer 4

Я нашел видео в сентябре 2016 года о добавлении вертикальной линии в график времени.https://www.youtube.com/watch?v=sG9tB04aaqE&t=416s

Он также включал пример в видео (https://jsfiddle.net/k5se146d/1/)

Но красная линия может быть исчез, когда событие Mouseover срабатывает. Я попытался добавить следующую строку в функцию. Кажется, что взломали диаграмму временной шкалы, но я не нашел результата в google. Надеюсь, это может помочь кому угодно.

function nowLine(div){ 

//get the height of the timeline div 
    var height; 
    $('#' + div + ' rect').each(function(index){ 
    var x = parseFloat($(this).attr('x')); 
    var y = parseFloat($(this).attr('y')); 

    if(x == 0 && y == 0) {height = parseFloat($(this).attr('height'))} 
    }) 

    var nowWord = $('#' + div + ' text:contains("Now")'); 

    nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0'); 
// add this line to remove the display:none style on the vertical line 
     $('#' + div + ' text:contains("Now")').each(function(idx, value) { 
      if (idx == 0) { 
       $(value).parent().find("rect").first().removeAttr("style"); 
      } else if (idx == 1) { 
       $(value).parent().find("rect").first().attr("style", "display:none;"); 
      } 

     }); 
} 

Answer 5

для расчета размещения даты маркеров,
найти начальную и конечные даты шкалы времени
использования методы таблицы данных ->getColumnRange()

var dateRangeStart = dataTable.getColumnRange(2); 
var dateRangeEnd = dataTable.getColumnRange(3); 

затем разделить ширину график на разницу в миллисекундах
умножьте результат на разницу даты начала и даты маркера

первого элемента, найденный 'path' является линией разделения строк этикетки и временной шкалы,
это может быть использовано, чтобы компенсировать ширину строки этикетки

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

google.charts.load('current', { 
 
    packages:['timeline'] 
 
}).then(function() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({type: 'string', id: 'Row'}); 
 
    dataTable.addColumn({type: 'string', id: 'Bar'}); 
 
    dataTable.addColumn({type: 'date', id: 'Start'}); 
 
    dataTable.addColumn({type: 'date', id: 'End'}); 
 
    var currentYear = (new Date()).getFullYear(); // keep example current 
 
    dataTable.addRows([ 
 
    ['Row 1', 'A-1', new Date(currentYear, 0, 1), new Date(currentYear, 2, 31)], 
 
    ['Row 1', 'A-2', new Date(currentYear, 3, 1), new Date(currentYear, 5, 30)], 
 
    ['Row 2', 'B-1', new Date(currentYear, 6, 1), new Date(currentYear, 8, 31)], 
 
    ['Row 2', 'B-2', new Date(currentYear, 9, 1), new Date(currentYear, 11, 31)] 
 
    ]); 
 
    var dataTableGroup = google.visualization.data.group(dataTable, [0]); 
 
    var dateRangeStart = dataTable.getColumnRange(2); 
 
    var dateRangeEnd = dataTable.getColumnRange(3); 
 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'MM/dd/yyyy' 
 
    }); 
 
    var rowHeight = 44; 
 
    var options = { 
 
    height: (dataTableGroup.getNumberOfRows() * rowHeight) + rowHeight 
 
    }; 
 

 
    function drawChart() { 
 
    chart.draw(dataTable, options); 
 
    } 
 

 
    function addMarker(markerDate) { 
 
    var baseline; 
 
    var baselineBounds; 
 
    var chartElements; 
 
    var markerLabel; 
 
    var markerLine; 
 
    var markerSpan; 
 
    var svg; 
 
    var timeline; 
 
    var timelineUnit; 
 
    var timelineWidth; 
 
    var timespan; 
 

 
    baseline = null; 
 
    timeline = null; 
 
    svg = null; 
 
    markerLabel = null; 
 
    chartElements = container.getElementsByTagName('svg'); 
 
    if (chartElements.length > 0) { 
 
     svg = chartElements[0]; 
 
    } 
 
    chartElements = container.getElementsByTagName('rect'); 
 
    if (chartElements.length > 0) { 
 
     timeline = chartElements[0]; 
 
    } 
 
    chartElements = container.getElementsByTagName('path'); 
 
    if (chartElements.length > 0) { 
 
     baseline = chartElements[0]; 
 
    } 
 
    chartElements = container.getElementsByTagName('text'); 
 
    if (chartElements.length > 0) { 
 
     markerLabel = chartElements[0].cloneNode(true); 
 
    } 
 
    if ((svg === null) || (timeline === null) || (baseline === null) || (markerLabel === null) || 
 
     (markerDate.getTime() < dateRangeStart.min.getTime()) || 
 
     (markerDate.getTime() > dateRangeEnd.max.getTime())) { 
 
     return; 
 
    } 
 

 
    // calculate placement 
 
    timelineWidth = parseFloat(timeline.getAttribute('width')); 
 
    baselineBounds = baseline.getBBox(); 
 
    timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime(); 
 
    timelineUnit = (timelineWidth - baselineBounds.x)/timespan; 
 
    markerSpan = markerDate.getTime() - dateRangeStart.min.getTime(); 
 

 
    // add label 
 
    markerLabel.setAttribute('fill', '#e91e63'); 
 
    markerLabel.setAttribute('y', options.height); 
 
    markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) - 4)); 
 
    markerLabel.textContent = formatDate.formatValue(markerDate); 
 
    svg.appendChild(markerLabel); 
 

 
    // add line 
 
    markerLine = timeline.cloneNode(true); 
 
    markerLine.setAttribute('y', 0); 
 
    markerLine.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan))); 
 
    markerLine.setAttribute('height', options.height); 
 
    markerLine.setAttribute('width', 1); 
 
    markerLine.setAttribute('stroke', 'none'); 
 
    markerLine.setAttribute('stroke-width', '0'); 
 
    markerLine.setAttribute('fill', '#e91e63'); 
 
    svg.appendChild(markerLine); 
 
    } 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    // add marker for current date 
 
    addMarker(new Date()); 
 
    }); 
 

 
    window.addEventListener('resize', drawChart, false); 
 
    drawChart(); 
 
});

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