0

Javascript または JQuery を使用して折れ線グラフを作成する最も簡単な方法は何ですか? http://www.chartjs.org/とhttp://www.oesmith.co.uk/morris.js/lines.htmlを試し ましたが、何も表示されませんでした。

ボタンが押されたときに表示される必要があります。

何か助けはありますか？

4

1 に答える 1

0

チャートを提供する多くのクライアント側 API があります。個人的には、HighChartsを使用するのが好きです。これは非常にシンプルで、場合によっては最小限のセットアップで済み、さまざまなデータ型を入力としてサポートします。

ここでデモと例を見つけることができます。

あなたがしなければならないことは次のとおりです。

  1. jQuery ライブラリ (ここから入手可能) を含めます。
  2. ここから入手できる HighCharts API ファイル (JS & CSS) を含めます。
  3. チャートのプレースホルダーを作成します (例: ID "myLineChart" の DIV)。
  4. データを JavaScript オブジェクト/配列に保持します (HighChart にデータを提供する方法はいくつかあることに注意してください。ベスト プラクティスは JSON オブジェクトです)。

  5. ページが読み込まれたとき ($(document).ready) または選択した別のイベントが発生したときに、HighCharts メソッドを呼び出します。以下に短い例を示します。

    $('#myLineChart').highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature'
    },    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]

    });

上記の例では、データは 2 つの配列として提供され、それぞれが系列を表し、2 本の線を持つ折れ線グラフを形成します。

HighCharts API リファレンスには、そのオプションに関する完全なドキュメントが掲載されていることに注意してください。

それが役に立てば幸い。

于 2013-10-20T09:13:46.060 に答える