3

この質問はGoogleチャートについて尋ねますが、より一般的です。

グラフの凡例にマウスオーバーすると、次のエラーが発生します。

Uncaught TypeError：nullのプロパティ'x'を読み取れません

「onmouseover」イベントなどを追加していませんがnull、シリーズの外観に不満があるようです（x値が異なる2つのシリーズをプロットすると、Googleチャートは空のポイントを追加しnullてプロットするように指示しますinterpolateNull : true）。

他の誰かがこの問題を抱えていましたか？グラフの凡例のマウスオーバーイベントを無効にする方法はありますか？

あなたが与えることができるどんなアドバイスにも感謝します。

更新： ここにこのエラーを示す最小限のjsfiddleがあります。Googleのグラフは、まったく同じ値を持つ2つのxポイントとyポイントを持つことを好まないようです。

4

4 に答える 4

4

適切なマウス イベントが組み込みハンドラに到達しないようにすることもできます。

mouseoverこれには、チャートの凡例にリスナーを追加する必要があります。リスナーが呼び出します(驚くべきことに、イベント伝播event.stopPropagation()の段階でトリガーする必要はありません)。capture

mousemoveイベントもリッスンされていることが判明したので、それらも停止します。

以下はFirefoxで私のために働いた：

$('svg > g:first-of-type').bind('mouseover mousemove', function(e) { e.stopPropagation(); });
于 2013-02-18T02:32:35.897 に答える
1

この回答は、ここで見つけたソリューションに基づいています: http://jsfiddle.net/asgallant/6Y8jF/2/

要点は、Google の伝説を隠して独自のものを構築することです。legend: {position: 'none'}最初に、オプションの 1 つとしてを渡して、組み込みの凡例を無効にしますchart.draw。

addDivチャートのホルダー div を作成する関数で、凡例を保持する 2 番目の要素を追加します。

function addDiv(parent_id, div_id) {
    $("#" + parent_id).append('<div id="' + div_id + '" class="chart-chart"></div><ul id="legend_' + div_id + '" class="chart-legend"></ul>');
}

次に、drawChart関数で凡例を作成します。

function drawChart(chart, original_table, 
    x_attr, y_attr, x_axis_lbl, y_axis_lbl, x_min_max,
    div_id) { //pass div_id to this function to be able to get legend element

    var google_table = allSeriesToGoogleTable(original_table, 
        x_attr, y_attr, ranking_titles);

    var colors = ["#3366cc","#dc3912","#ff9900"]; //use whatever colors you like
    var options = {'chartArea':{width:"60%"}, 
        vAxis: {'title': y_axis_lbl}, 'hAxis': {'title': x_axis_lbl},
        'interpolateNulls':true,
        colors: colors, //use the same colors for the chart and the legend
        legend: {position: 'none'} //hide default legend
    };
    var legend = $('#legend_' + div_id);
    for (var i = 1; i < ranking_titles.length; i++) {
        var li = $('<li></li>'),
            marker = $('<div class="legendMarker"></div>'),
            explanation = $('<span></span>');
        explanation.text(ranking_titles[i]); // legend marker text
        marker.css( {backgroundColor: colors[i-1]} ); //marker color
        li.append(marker).append(explanation);
        legend.append(li); 
    }
    if ( ! x_min_max === undefined )
    //do something
    chart.draw( google_table, options );

    // add the data table to the chart
    chart.google_table = google_table;
}

もちろん、フィドルからの CSS も必ず含めてください。

.chart-chart {
    float: left;
}
.chart-legend {
    margin: 30px 0 0 0;
    float: left;
    list-style: none;
}
div.legendMarker {
    height: 1em;
    width: 1em;
    display: inline-block;
    margin: 0 5px 0 0;
}

コードをフィドルに入れることができなかったので、これはテストされていませんが、99% はそこに到達するはずです。

于 2013-02-13T21:06:27.060 に答える
0

要素に複数のマウスオーバー イベントがある場合、それらは を使用して追加されている必要がありますaddEventListener。

また、 を使用して追加したイベントを削除する場合はaddEventListener、 が必要removeEventListenerです。ただし、このメソッドにはリスナー関数への参照が必要です ( https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListenerを参照)。

次に、要素とその子のすべての JavaScript イベントリスナーを削除してみてください。

于 2013-02-17T20:05:35.510 に答える
0

このドキュメントは非常に役立ちます: https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=en#Configuration_Options

ただし、コードにエラーが含まれていると思います。基本的な構成から始めて、デバッグを試みます。

于 2013-02-12T09:46:45.957 に答える