2

私の目標は、サーバー上で Google ビジュアライゼーションのデータを生成し、それを Java スクリプトとしてクライアントに渡して、折れ線グラフとしてレンダリングできるようにすることです。以下の例は正しくコンパイルされますが、ブラウザーでレンダリングするとエラーが発生します。サーバー上で構築された後、DataCommon オブジェクトを Java スクリプトとして正しくレンダリングするにはどうすればよいですか?

namespace Website

open System

type Action =
    | Test

module Page =
    open System.Web
    open IntelliFactory.WebSharper.Sitelets
    open IntelliFactory.WebSharper.Html

    let Page title body : Content<Action> =       
        PageContent (fun context -> 
            { Page.Default with
                Title = Some(title)
                Body = body context
            })

module Chart =
    open System

    open IntelliFactory.WebSharper
    open IntelliFactory.WebSharper.Html
    open IntelliFactory.WebSharper.Google
    open IntelliFactory.WebSharper.Google.Visualization
    open IntelliFactory.WebSharper.Google.Visualization.Base
    open IntelliFactory.WebSharper.EcmaScript

    open IntelliFactory.WebSharper.Web

    let RandomData () =

        let random = new Random()

        let valueCount = 100
        let maxValue = 300
        let seriesCount = random.Next(5)

        let data = new Base.DataTable()
        data.addRows(valueCount)
        |> ignore        

        let addSeries index =
            let name = sprintf "Series %d" index
            data.addColumn(ColumnType.NumberType, name)
            |> ignore

            Seq.init valueCount (fun index -> random.Next(maxValue))
            |> Seq.iteri (fun valueIndex value -> data.setValue(index, valueIndex, value) |> ignore)

        [0 .. seriesCount]
        |> List.iter addSeries

        data        

    type LineChart( data : DataCommon, title ) =    
        inherit Web.Control()

        [<JavaScript>]
        override this.Body = 
            let div = 
                Div [] 
                |>! OnAfterRender (fun container ->
                    let visualization = new Visualizations.LineChart(container.Dom)
                    let options = {
                        Visualizations.LineChartOptions.Default with
                            width = 400.0
                            height = 240.0
                            legend = Visualizations.LegendPosition.Bottom
                            title = title
                    }
                    visualization.draw(data, options))
            div :> _

module Site =
    open Chart
    open Page

    open IntelliFactory.Html
    open IntelliFactory.WebSharper.Sitelets

    let TestPage =
        Page "Test" (fun (context : Context<Action>) -> 
        [
            Div [Text "Test"]
            Div [new Chart.LineChart(RandomData(), "Test Chart")]
        ])            

    let Main =
        Sitelet.Sum [
            Sitelet.Content "/" Test TestPage
        ]

open IntelliFactory.WebSharper.Sitelets
type Website() =    
    interface IWebsite<Action> with
        member this.Sitelet = Site.Main
        member this.Actions = [Test]

[<assembly: WebsiteAttribute(typeof<Website>)>]
do ()
4

1 に答える 1

2

関数RandomDataはサーバー上で実行されます。したがってDataTable、サーバー上で JavaScript のみのオブジェクトを構築しています。これを行った結果は、一般に未定義です。

あなたがすべき：

  1. データを生成するサーバー側関数を でマークします[<Remote>]。
  2. 注釈付きのクライアント側コードに UI 構築を移動します[<JavaScript>]。
  3. クライアント側からリモート関数を呼び出します - これは AJAX を使用してデータを取得します。async.Returnブラウザをブロックしないように、リモート機能からアクセスすることをお勧めします。

詳細については、Remotingページまたはマニュアルの関連セクションを確認してください。

または、データをオブジェクトのコンストラクターに渡し、メンバーControlからアクセスすることもできます。Bodyこれにより、HTML 生成中にデータがシリアル化され、AJAX 呼び出しが不要になります。たとえば、静的 HTML サイトを生成する場合に便利です。

于 2012-06-09T19:49:19.780 に答える