2

ページの読み込み時に動的データを含む Google チャートを表示しようとしています。明確にするために、webMatrix (asp.net、c#、sql db) を使用しています。

メインデータベースに5分ごとにクエリを実行し、サーバーデータベース「ターゲット」にデータを保存するc＃コードビハインドがあります。

私の目標は、Google チャートのデータソースとして「Target」を使用することです。すべての例がハードコードされたデータを含む JavaScript コードを示しているため、Google チャートのドキュメントには本当に混乱しています。動的データが含まれるように JavaScript を操作するにはどうすればよいですか?

      <script>
        function initialize() {
          var db = 'Target'
          var query = new google.visualization.Query(db);

          query.setQuery('select Problem group by Queue');

          query.send(handleQueryResponse);
        }

        function handleQueryResponse(response) {

          if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
          }

          var data = response.getDataTable();
          var chart = new google.visualization.PieChart(document.getElementById('chart'));
          chart.draw(data, {width: 400, height: 240, is3D: true});
        }

    </script>
4

1 に答える 1

0

私はこれを理解することができました...

Razor 構文では、スクリプト内で分離コード変数を使用できることに気付きませんでした。

C#

{
int a = 100;
int b = 350;
}

Javascript

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    dataArray = [];



    dataArray[0] = ['0', 'Title1', 'Title2'];
    dataArray[1] = ['Element 1', @a, 0];
    dataArray[2] = ['Element 2', 0, @b];

    function drawChart() {


        //var dt = new google.visualization.DataTable();
        //dt.addRows(data);
        var data = google.visualization.arrayToDataTable(dataArray);

        var options = {
            title: 'Tickets',
            vAxis: { titleTextStyle: { color: 'red'} },
            backgroundColor:  'lightgray'

        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>
于 2013-06-02T19:01:17.333 に答える