web-dev-qa-db-ja.com

グーグルタイムライン視覚化の垂直参照線

こんにちは私はグーグル視覚化APIを使用して私のウェブサイトにタイムラインチャートを描きます。それはうまく機能します。しかし、私を悩ませている小さなことが1つあります。現在の日付を表すために、グラフ領域に縦線を表示したいと思います。どんな解決策も教えてください。

私のコード：

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

意図した結果：緑色の線は現在の日付を表します enter image description here

編集：

これが不可能な場合は、これを実現できる他のAPIを提案してください。

google-apigoogle-visualization
16
wishchaser

現在の日付を表す最初のタスクを作成します。

      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');
    });
}

結果：

enter image description here

出典： Viviendo en la Era de la Web 2.

12
jpussacq

日付マーカーの配置を計算するには、
タイムラインの開始日と終了日を見つける
データテーブルメソッドを使用-> 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>
8
WhiteHat

2016年9月に、タイムラインチャートに縦線を追加することについてのビデオを見つけました。 https://www.youtube.com/watch?v=sG9tB04aaqE&t=416s

ビデオにも例が含まれています（ https://jsfiddle.net/k5se146d/1/ ）

ただし、マウスオーバーイベントがトリガーされると、赤い線が消える場合があります。関数に次の行を追加してみました。タイムラインチャートではハッキングのようですが、グーグルで結果が見つかりませんでした。それが誰もが必要とするのを助けることができることを願っています。

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;");
            }

        });
}
5
Long Ranger

ドメイン（日付）列で「注釈」ロール列を使用します。チャートオプションで、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/

2
asgallant

私自身も同じ問題を抱えていて、ウェブ上で何も見つかりませんでした（存在する可能性はありますが）。次のように比較的配置された垂直線の形でフローティングdivをオーバーレイすることで問題を解決しました。

タイムラインチャートの幅（行ラベルの幅を差し引いたもの）は、チャートに表示される最小-最大日付間の差に関連しています。今日の日付が最小-最大日付の間のどこかにあると仮定すると、比率(today - min date)/(max date - min date)は比率(current date line position)/(chart width - label width)に等しくなります。キャッチは、ラベル幅を特定の数値に設定できない限り（有効なチャート幅を計算するために使用できます）、今日の線が「シフト」してしまうことです。

行のラベル幅を設定する方法については何も見つかりませんでした（これに関するヘルプは大歓迎です）ので、今日の行の位置はおおよそです...（ただし、ラベル幅は変更されませんが一貫しています）

これがお役に立てば幸い、ニコラス

0
user3367842