sql >> データベース >  >> RDS >> Mysql

GoogleChartのタイムラインアイテムからリンクを作成する

    まず、データ形式 タイムラインチャートの場合、次のように指定します。

    デフォルト以外のツールチップを提供するには、
    データテーブルのすべての行に5つの列すべてが含まれている必要があります
    (行ラベル、バーラベル、ツールチップ、開始、終了)
    3番目の列。
    ツールチップのカスタマイズ ...

    ただし、ツールチップをトリガーする唯一のオプションは'focus'です。 。
    これにより、マウスが要素を離れるとツールチップが消えます。
    ユーザーはリンクをクリックできなくなります。
    他のグラフには「選択」があります ツールチップを所定の位置にロックするトリガー。

    例については、次の作業スニペットを参照してください...

    google.charts.load('current', {
      packages: ['timeline']
    }).then(function () {
      var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
      var data1 = new google.visualization.DataTable();
    
      data1.addColumn({ type: 'string', id: 'fracao' });
      data1.addColumn({ type: 'string', id: 'contrato' });
      data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
      data1.addColumn({ type: 'date', id: 'Start' });
      data1.addColumn({ type: 'date', id: 'End' });
      data1.addRows([
        ['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=35">Serra Lopes, Cortes Martins & Associados</a>', new Date(2018, 5, 01), new Date(2019, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=1">Serra Lopes, Cortes Martins & Associados</a>', new Date(2007, 2, 01), new Date(2013, 4, 31)],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', '<a href="detalhe_fraccao.php?id=34">Serra Lopes, Cortes Martins & Associados</a>', new Date(2017, 5, 01), new Date(2018, 4, 31)]
      ]);
    
      var options1 = {
        chartArea: {
          left: 40,
          width: '100%',
        },
        timeline: {
          groupByRowLabel: true,
          singleColor: 'green' ,
          showRowLabels: true
        },
        tooltip: {
          isHtml: true
        },
        width: '100%',
        height: 600,
      };
    
      function drawChart1() {
        chart1.draw(data1, options1);
      }
      drawChart1();
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="example3"></div>

    代わりに、'select'の使用をお勧めします イベントを開いてサイトを開きます。
    ユーザーが要素を選択したら、サイトを開きます。
    リンクをデータテーブルに保存するには、
    最後の列として列を追加します。
    したがって、タイムラインはそれを無視します。

    次の作業スニペットを参照してください...

    google.charts.load('current', {
      packages: ['timeline']
    }).then(function () {
      var chart1 = new google.visualization.Timeline(document.getElementById('example3'));
      var data1 = new google.visualization.DataTable();
    
      data1.addColumn({ type: 'string', id: 'fracao' });
      data1.addColumn({ type: 'string', id: 'contrato' });
      data1.addColumn({ type: 'date', id: 'Start' });
      data1.addColumn({ type: 'date', id: 'End' });
      data1.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
      data1.addRows([
        ['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2018, 5, 01), new Date(2019, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2007, 2, 01), new Date(2013, 4, 31), 'detalhe_fraccao.php?id=35'],['Torre 2 - E 10ºB', 'Serra Lopes, Cortes Martins & Associados', new Date(2017, 5, 01), new Date(2018, 4, 31), 'detalhe_fraccao.php?id=35']
      ]);
    
      var options1 = {
        chartArea: {
          left: 40,
          width: '100%',
        },
        timeline: {
          groupByRowLabel: true,
          singleColor: 'green' ,
          showRowLabels: true
        },
        width: '100%',
        height: 600,
      };
    
      google.visualization.events.addListener(chart1, 'select', function () {
        var selection = chart1.getSelection();
        if (selection.length > 0) {
          window.open(data1.getValue(selection[0].row, 4), '_blank');
          console.log(data1.getValue(selection[0].row, 4));
        }
      });
    
      function drawChart1() {
        chart1.draw(data1, options1);
      }
      drawChart1();
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="example3"></div>

    注:リンクは上記のスニペットからは開きませんが、
    ただし、自分のページからは正常に機能するはずです...



    1. タイムスタンプをNULLに変換するJDBC(zeroDateTimeBehaviorの問題)

    2. 製品名のURLを書き換えます

    3. グループ化するときにテーブルから最長の「文字列」を選択するにはどうすればよいですか

    4. このPDOプリペアドステートメントはfalseを返しますが、エラーはスローしません