1

AngularJS を使用して新しいインターフェイスを構築しており、モジュールの少なくとも 1 つにチャートが含まれます。これまでのところ、Google チャートを試してみましたが、ローカル NodeJS サーバー (WebStorm 経由) と継続的開発サーバーの両方でうまく機能しますが、チームの他の全員にとって、チャートはそれらのいずれにも表示されません。 .

円グラフ

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
    ['Pears', 10.5],
    ['Apples', 16.5],
    ['Bananas', 5]
]);

// Set chart options
var options = {'title':'Fruits',
    'width':420,
    'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_1'));
chart.draw(data, options);
}

コードでわかるように、私はすでに google.setOnLoadCallback(drawchart); を持っています。CSS のおかげで Google ビジュアライゼーション チャートが表示されないことで示唆されているように。

Google の JSAPI などをダウンロードしてプロジェクトに含めようとしましたが、他のものと違いはありません。

私たちは皆、Google Chrome を使用しています。私は自分のgmailでログインしていますが、他の人もログインしていると思います。つまり、私の Google Chrome ブラウザにあるもので、彼らにはないものであるに違いありません。

これが何であるか考えていますか？

編集

これは正確な解決策を持つ私のJSFiddleですが、整合性のために変数やデータなどの一部のコンテンツを変更しました...

4

2 に答える 2

1

あなたのコードをコピーしてファイルに貼り付けたところ、正常に読み込まれて表示されたので、何が問題なのかはわかりません。デバッグに役立ついくつかの提案を行うことができます。

1) コードを単独でファイルに入れてロードしてみてください。動作が異なる場合は、セットアップ内の何かです。

2) 「シークレット」ウィンドウで開いてみてください。これにより、問題を引き起こす可能性のあるほとんどの Chrome 拡張機能が排除されます。

3) ページを読み込んだときにコンソールを開き、役立つエラー メッセージがあるかどうかを確認します。

4) ページをロードするときに [ネットワーク] パネルを開き、役立つエラー メッセージがあるかどうかを確認します。

于 2013-07-22T14:09:56.240 に答える
0

解決策が見つかりました...

問題は、私の場合、チャートにデータをロードできて幸運だったようで、他の人はチャートを取得しましたが、データが間に合わなかったため、チャートがバグアウトしたようです。つまり、ある種のタイミングの問題です。

ソリューションは、Angular Google Chart Directive ( Demo of it ) を使用していました。実装すると、同僚もチャートを見ることができました。

次に、ユーザー言語に応じてフォーマットされたチャートを取得するために i18next も実装しましたが、それは別の話です...

于 2013-07-30T14:56:18.297 に答える