javascript - Google ChartsのAPIデータにリンクを挿入しますか？

Question

私はここのグーグルチャートの遊び場でグーグルチャートをかなり遊んでいます：

私が遊んでいるコードはこれです：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria'],
    ['2003',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

そしてそれは私にこのように見える素敵なチャートを与えます：

ここに画像の説明を入力してください

このグラフを自分のWebサイトのニーズに合わせようとしています。そのためには、左側のバーの名前を別のページにリンクする必要があります。したがって、たとえば2003は、ユーザーがクリックできるリンクであり、2004なども同様です。

私はこのようなことをしようとしました：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria'],
    ['<a href="url">Link text</a>',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

しかし、私はそれがそれほど簡単であることを期待することしかできませんでした、そしてそれはそうではありませんでした。これが可能かどうか誰かが知っていますか？

score 16 · Accepted Answer

Manzoidの答えは良いですが、リンクをたどるのではなくアラートボックスを表示するだけなので、「まだ組み立てが必要です」。これがより完全な答えですが、ラベルではなくバーをクリック可能にします。リンクを含むDataTableを作成し、そこからDataViewを作成して、表示する列を選択します。次に、selectイベントが発生すると、元のDataTableからリンクを取得するだけです。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'link', 'Austria'],
          ['2003', 'http://en.wikipedia.org/wiki/2003',  1336060],
          ['2004', 'http://en.wikipedia.org/wiki/2004', 1538156],
          ['2005', 'http://en.wikipedia.org/wiki/2005', 1576579],
          ['2006', 'http://en.wikipedia.org/wiki/2006', 1600652],
          ['2007', 'http://en.wikipedia.org/wiki/2007', 1968113],
          ['2008', 'http://en.wikipedia.org/wiki/2008', 1901067]             
        ]);
       var view = new google.visualization.DataView(data);
       view.setColumns([0, 2]);

       var options = {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}};

       var chart = new google.visualization.BarChart( 
           document.getElementById('chart_div'));
       chart.draw(view, options);

       var selectHandler = function(e) {
          window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
       }

       google.visualization.events.addListener(chart, 'select', selectHandler);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 900px;"></div>
  </body>
</html>

score 9 · Accepted Answer

表示されている出力はHTMLではなくSVGであるため、これは重要です。この例のラベル（ "2004"、 "2005"など）はSVGテキストノード内に埋め込まれているため、それらの中に生のHTMLマークアップを挿入してもHTMLとしてレンダリングされません。

回避策は、ターゲット値（ここでも、「2004」、「2005」など）を含むテキストノードをスキャンし、それらをForeignObject要素に置き換えることです。 ForeignObject要素には通常のHTMLを含めることができます。これらは、元のSVGテキストノードがあった場所に多かれ少なかれ配置する必要があります。

これは、これらすべてを説明するサンプルスニペットです。これは特定の例に合わせて調整されているため、実際のデータが何であれレンダリングに切り替える場合は、それに応じてこのスニペットを変更および一般化する必要があります。

// Note: You will probably need to tweak these deltas
// for your labels to position nicely.
var xDelta = 35;
var yDelta = 13;
var years = ['2003','2004','2005','2006','2007','2008'];
$('text').each(function(i, el) {
  if (years.indexOf(el.textContent) != -1) {
    var g = el.parentNode;
    var x = el.getAttribute('x');
    var y = el.getAttribute('y');
    var width = el.getAttribute('width') || 50;
    var height = el.getAttribute('height') || 15;

    // A "ForeignObject" tag is how you can inject HTML into an SVG document.
    var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")
    fo.setAttribute('x', x - xDelta);
    fo.setAttribute('y', y - yDelta);
    fo.setAttribute('height', height);
    fo.setAttribute('width', width);
    var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
    var a = document.createElement("A");
    a.href = "http://yahoo.com";
    a.setAttribute("style", "color:blue;");
    a.innerHTML = el.textContent;
    body.appendChild(a);
    fo.appendChild(body);

    // Remove the original SVG text and replace it with the HTML.
    g.removeChild(el);
    g.appendChild(fo);
  }
});

ちょっとした注意ですが、便宜上、jQueryが少しありますが、に置き換えることができ $('text')ますdocument.getElementsByTagName("svg")[0].getElementsByTagName("text")。

score 6 · Accepted Answer

SVGの埋め込みルートは（当然のことながら）毛深いので、いじくりまわしたくないので、まったく別のアプローチを試してみましょう。ラベルではなくバーがクリック可能になるように、機能仕様を少し変更する柔軟性があると仮定すると、これが機能するはるかに単純なソリューションです。

このスニペットでを探しalertます。これは、リダイレクトを行うためにカスタマイズする部分です。

function drawVisualization() {
  // Create and populate the data table.
  var rawData = [
    ['Year', 'Austria'],
    ['2003',  1336060],
    ['2004',  1538156],
    ['2005',  1576579],
    ['2006',  1600652],
    ['2007',  1968113],
    ['2008',  1901067]
  ];
  var data = google.visualization.arrayToDataTable(rawData);

  // Create and draw the visualization.
  var chart = new google.visualization.BarChart(document.getElementById('visualization'));
  chart.draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
  var handler = function(e) {
    var sel = chart.getSelection();
    sel = sel[0];
    if (sel && sel['row'] && sel['column']) {
      var year = rawData[sel['row'] + 1][0];
      alert(year); // This where you'd construct the URL for this row, and redirect to it.
    }
  }
  google.visualization.events.addListener(chart, 'select', handler);
}

score 1 · Accepted Answer

以前の返信に直接コメントするのに十分な評判ポイントがないようですので、新しい投稿としてコメントすることをお詫びします。manzoidの提案は素晴らしいですが、私が見つけた1つの問題があり、Mark Butlerが同じ問題に遭遇した（または無意識のうちにそれを回避した）ようです。

if (sel && sel['row'] && sel['column']) {

その行は、最初のデータポイントがクリックできないようにします。1月から12月の棒グラフで使用しましたが、クリックできるのは2月から12月だけでした。条件からsel['row']を削除すると、Janが機能できるようになります。ただし、if（）条件が本当に必要かどうかはわかりません。

score 1 · Accepted Answer

ラベルの各テキストタグをアンカータグでラップする別のソリューションを次に示します。

いいえForeignObject
クリック可能なラベル
cssでスタイリング可能（ホバー効果）

サンプルは次のとおりです：https ：//jsfiddle.net/tokkonoPapa/h3eq9m9p/

/* find the value in array */
function inArray(val, arr) {
    var i, n = arr.length;
    val = val.replace('…', ''); // remove ellipsis
    for (i = 0; i < n; ++i) {
        if (i in arr && 0 === arr[i].label.indexOf(val)) {
            return i;
        }
    }
    return -1;
}

/* add a link to each label */
function addLink(data, id) {
    var n, p, info = [], ns = 'hxxp://www.w3.org/1999/xlink';

    // make an array for label and link.
    n = data.getNumberOfRows();
    for (i = 0; i < n; ++i) {
        info.push({
            label: data.getValue(i, 0),
            link:  data.getValue(i, 2)
        });
    }

    $('#' + id).find('text').each(function(i, elm) {
        p = elm.parentNode;
        if ('g' === p.tagName.toLowerCase()) {
            i = inArray(elm.textContent, info);
            if (-1 !== i) {
                /* wrap text tag with anchor tag */
                n = document.createElementNS('hxxp://www.w3.org/2000/svg', 'a');
                n.setAttributeNS(ns, 'xlink:href', info[i].link);
                n.setAttributeNS(ns, 'title', info[i].label);
                n.setAttribute('target', '_blank');
                n.setAttribute('class', 'city-name');
                n.appendChild(p.removeChild(elm));
                p.appendChild(n);
                info.splice(i, 1); // for speeding up
            }
        }
    });
}

function drawBasic() {
    var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', {role: 'link'}],
        ['New York City, NY', 8175000, 'hxxp://google.com/'],
        ['Los Angeles, CA',   3792000, 'hxxp://yahoo.com/' ],
        ['Chicago, IL',       2695000, 'hxxp://bing.com/'  ],
        ['Houston, TX',       2099000, 'hxxp://example.com'],
        ['Philadelphia, PA',  1526000, 'hxxp://example.com']
    ]);

    var options = {...};
    var chart = new google.visualization.BarChart(
        document.getElementById('chart_div')
    );

    chart.draw(data, options);

    addLink(data, 'chart_div');
}

score 0 · Accepted Answer

フォーマッターを使用する必要があります。

値をHTMLに置き換えると、並べ替えが正しく機能しなくなります。

javascript - Google ChartsのAPIデータにリンクを挿入しますか？

6 に答える 6

Related

Reference