マルチカラムピッカー

マルチカラムピッカーはSpreadJSにおけるドロップダウンの一種で、ワークブックのセルスタイルとしてJavaScriptコードで定義されています。 開発者はピッカーのデータソースを指定することができます。 以下のスプレッドシートで マルチカラムピッカー でさまざまな項目を選択し、オプションがどのように変化するかを確認してみてください。

ドロップダウンは、ワークブックのセルに特定のプロパティを持つドロップダウンメニューを追加する機能を提供します。これらのドロップダウンメニューは、ドロップダウンメニューに使用するメニューを指定するだけで、余分なコードを必要としません。 SpreadJSには9種類のドロップダウンが用意されており、このデモではマルチカラムピッカーの使い方を紹介しています。 マルチカラムピッカーを開く前に、セルのスタイルにオプションデータを設定する必要があります。 任意のデータ項目を選択すると、そのデータ項目の値がオブジェクト型として現在のセル値に送信されます。返されたオブジェクトの値は、PROPERTY関数を使用してオブジェクトを解析し、指定されたプロパティ値を取得することができます。 以下のコードのように、マルチカラムピッカーのドロップダウンを使用することができます。 マルチカラムピッカーのオプションは、以下のような構造になっていなければなりません。 PROPERTY関数は、オブジェクトのプロパティの値を取得することができます。オブジェクトのプロパティはjavascriptのルールに従う必要があり、大文字小文字を区別します。PROPERTY関数は数式の中で使用することができます。 =PROPERTY(dataexpression, propertypath). data_expression: オブジェクトデータを示します。オブジェクトまたはオブジェクト関数の結果であるセル参照を受け取ります。 property_path: オブジェクト内のプロパティパス、オブジェクトの深さに沿ったプロパティパスを表示します。 サンプルコード:
var spreadNS = GC.Spread.Sheets; window.onload = function () { initSpread(); }; function initSpread() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 5 }); spread.options.allowDynamicArray = true; spread.suspendPaint(); initTemplateSheet(spread); initArrayDataSourceSheet(spread); initRangeRefDataSourceSheet(spread); initTableRefDataSourceSheet(spread); initFormulaRefDataSourceSheet(spread); spread.resumePaint(); } function initArrayDataSourceSheet(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.name("ArrayDataSource"); var colInfos = [ { name: "Film", displayName: "FILM", size: "2*" }, { name: "Genre", displayName: "GENRE", size: "*" }, { name: "Lead Studio", size: "*" }, { name: "Audience Score %", size: 120}, { name: "Worldwide Gross", size: 100, formatter: "$#,##0.00"}, { name: "Year", size: 50 } ]; var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMultiColumn", useButtonStyle: true, } ]; style.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.multiColumn, option: { width: 700, height: 400, dataSource: dataSource, bindingInfos: colInfos } } ]; style.formatter = '=PROPERTY(@, "Film")'; sheet.setColumnWidth(2, 150); sheet.getCell(1, 2).wordWrap(true); sheet.setText(1, 2, "DataSource is array, return data parsed to the value of property 'Film'."); sheet.setStyle(1, 3, style); sheet.getCell(1, 3).wordWrap(true); sheet.setColumnWidth(3, 400); sheet.setRowHeight(1, 50); var style1 = new GC.Spread.Sheets.Style(); style1.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMultiColumn", useButtonStyle: true, } ]; style1.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.multiColumn, option: { width: 700, height: 400, dataSource: dataSource } } ]; sheet.setText(2, 2, "DataSource is array, return data is object."); sheet.getCell(2, 2).wordWrap(true); sheet.setStyle(2, 3, style1); sheet.getCell(2, 3).wordWrap(true); sheet.setColumnWidth(3, 400); sheet.setRowHeight(2, 200); var templateSheet = spread.getSheet(1); var cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 5, 2); sheet.setCellType(2, 3, cellType, GC.Spread.Sheets.SheetArea.viewport); sheet.resumePaint(); } function initTemplateSheet (spread) { var templateSheet = spread.getSheet(1); templateSheet.suspendPaint(); templateSheet.visible(false); templateSheet.setRowCount(5); templateSheet.setColumnCount(2); templateSheet.setValue(0, 0, "Film Name: "); templateSheet.getCell(0, 0).font("14px Arial"); templateSheet.setBindingPath(0, 1, "Film"); templateSheet.setValue(1, 0, "Film Type: "); templateSheet.getCell(1, 0).font("14px Arial"); templateSheet.setBindingPath(1, 1, "Genre"); templateSheet.setValue(2, 0, "Lead Studio: "); templateSheet.getCell(2, 0).font("14px Arial"); templateSheet.setBindingPath(2, 1, "Lead Studio"); templateSheet.setValue(3, 0, "Audience Score %: "); templateSheet.getCell(3, 0).font("14px Arial"); templateSheet.setBindingPath(3, 1, "Audience Score %"); templateSheet.setValue(4, 0, "Profitability: "); templateSheet.getCell(4, 0).font("14px Arial"); templateSheet.setBindingPath(4, 1, "Profitability"); templateSheet.setFormatter(4, 1, "$#,##0.00"); templateSheet.resumePaint(); } function initRangeRefDataSourceSheet(spread) { var sheet = spread.getSheet(2); sheet.suspendPaint(); sheet.name("RangeRefDataSource"); var colInfos = [ { name: "Film", displayName: "FILM", size: "2*" }, { name: "Genre", displayName: "GENRE", size: "*" }, { name: "Lead Studio", size: "*" }, ]; sheet.setText(0, 0, "27 Dresses"); sheet.setText(0, 1, "Comedy"); sheet.setText(0, 2, "Fox"); sheet.setText(1, 0, "(500) Days of Summer"); sheet.setText(1, 1, "Comedy"); sheet.setText(1, 2, "Fox"); var dataSource = "RangeRefDataSource!$A$1:$C$2"; var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMultiColumn", useButtonStyle: true, } ]; style.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.multiColumn, option: { width: 400, height: 100, dataSource: dataSource, bindingInfos: colInfos } } ]; style.formatter = '=PROPERTY(@, "Genre")'; sheet.setText(0, 3, "DataSource is range reference, return data parsed to the value of property 'Genre'."); sheet.setStyle(1, 3, style); sheet.getCell(1, 3).wordWrap(true); sheet.setColumnWidth(3, 400); sheet.setRowHeight(1, 50); sheet.resumePaint(); } function initTableRefDataSourceSheet(spread) { var sheet = spread.getSheet(3); sheet.suspendPaint(); sheet.name("TableRefDataSource"); var data = [ { name: "Yang", age: 24 }, { name: "Wang", age: 35 }, { name: "Zhang", age: 20 } ]; sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({ name: "Yang", age: 24, country: "China", city: "Xi'an", ds: data })); var table = sheet.tables.add("tableSource", 6, 0, 1, 1); table.bindingPath("ds"); var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMultiColumn", useButtonStyle: true, } ]; style.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.multiColumn, option: { width: 180, height: 120, dataSource: "tableSource[[#Headers], [#Data]]" } } ]; style.formatter = '=PROPERTY(@, "age")'; sheet.setText(0, 3, "DataSource is table reference, return data parsed to the value of property 'age'."); sheet.setStyle(1, 3, style); sheet.getCell(1, 3).wordWrap(true); sheet.setColumnWidth(3, 400); sheet.setRowHeight(1, 50); sheet.resumePaint(); } function initFormulaRefDataSourceSheet(spread) { var sheet = spread.getSheet(4); sheet.suspendPaint(); sheet.name("FormulaRefDataSource"); var colInfos = [ { name: "Rate1", size: "*" }, { name: "Rate2", size: "*" }, { name: "Rate3", size: "*" }, ]; var style = new GC.Spread.Sheets.Style(); style.cellButtons = [ { imageType: GC.Spread.Sheets.ButtonImageType.dropdown, command: "openMultiColumn", useButtonStyle: true, } ]; style.dropDowns = [ { type: GC.Spread.Sheets.DropDownType.multiColumn, option: { width: 400, height: 120, dataSource: "=RANDARRAY(3,3)", bindingInfos: colInfos } } ]; style.formatter = '=PROPERTY(@, "Rate2")'; sheet.setText(0, 3, "DataSource is formula '=RANDARRAY(3,3)', return data parsed to the value of property 'Rate2'."); sheet.setStyle(1, 3, style); sheet.getCell(1, 3).wordWrap(true); sheet.setColumnWidth(3, 400); sheet.setRowHeight(1, 50); sheet.resumePaint(); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
var dataSource = [ { "Film": "27 Dresses", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 71, "Profitability": 5.34, "Rating": 40, "Worldwide Gross": 160.30, "Year": 2008 }, { "Film": "(500) Days of Summer", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 81, "Profitability": 8.09, "Rating": 87, "Worldwide Gross": 60.72, "Year": 2009 }, { "Film": "A Dangerous Method", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 89, "Profitability": 0.44, "Rating": 79, "Worldwide Gross": 8.97, "Year": 2011 }, { "Film": "A Serious Man", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 64, "Profitability": 4.38, "Rating": 89, "Worldwide Gross": 30.68, "Year": 2009 }, { "Film": "Across the Universe", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 84, "Profitability": 0.65, "Rating": 54, "Worldwide Gross": 29.36, "Year": 2007 }, { "Film": "Beginners", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 80, "Profitability": 4.47, "Rating": 84, "Worldwide Gross": 14.31, "Year": 2011 }, { "Film": "Dear John", "Genre": "Drama", "Lead Studio": "Sony", "Audience Score %": 66, "Profitability": 4.5988, "Rating": 29, "Worldwide Gross": 114.97, "Year": 2010 }, { "Film": "Enchanted", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 80, "Profitability": 4.00, "Rating": 93, "Worldwide Gross": 340.48, "Year": 2007 }, { "Film": "Fireproof", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 51, "Profitability": 66.93, "Rating": 40, "Worldwide Gross": 33.46, "Year": 2008 }, { "Film": "Four Christmases", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 52, "Profitability": 2.02, "Rating": 26, "Worldwide Gross": 161.83, "Year": 2008 }, { "Film": "Ghosts of Girlfriends Past", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 2.0444, "Rating": 27, "Worldwide Gross": 102.22, "Year": 2009 }, { "Film": "Gnomeo and Juliet", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 52, "Profitability": 5.38, "Rating": 56, "Worldwide Gross": 193.96, "Year": 2011 }, { "Film": "Going the Distance", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 56, "Profitability": 1.31, "Rating": 53, "Worldwide Gross": 42.05, "Year": 2010 }, { "Film": "Good Luck Chuck", "Genre": "Comedy", "Lead Studio": "Lionsgate", "Audience Score %": 61, "Profitability": 2.36, "Rating": 3, "Worldwide Gross": 59.19, "Year": 2007 }, { "Film": "He's Just Not That Into You", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 60, "Profitability": 7.15, "Rating": 42, "Worldwide Gross": 178.84, "Year": 2009 }, { "Film": "High School Musical 3: Senior Year", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 76, "Profitability": 22.91, "Rating": 65, "Worldwide Gross": 252.04, "Year": 2008 }, { "Film": "I Love You Phillip Morris", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 57, "Profitability": 1.34, "Rating": 71, "Worldwide Gross": 20.1, "Year": 2010 }, { "Film": "It's Complicated", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 63, "Profitability": 2.64, "Rating": 56, "Worldwide Gross": 224.6, "Year": 2009 }, { "Film": "Jane Eyre", "Genre": "Romance", "Lead Studio": "Universal", "Audience Score %": 77, "Profitability": null, "Rating": 85, "Worldwide Gross": 30.14, "Year": 2011 }, { "Film": "Just Wright", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 58, "Profitability": 1.79, "Rating": 45, "Worldwide Gross": 21.56, "Year": 2010 }, { "Film": "Killers", "Genre": "Action", "Lead Studio": "Lionsgate", "Audience Score %": 45, "Profitability": 1.24, "Rating": 11, "Worldwide Gross": 93.4, "Year": 2010 }, { "Film": "Knocked Up", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 83, "Profitability": 6.63, "Rating": 91, "Worldwide Gross": 219.00, "Year": 2007 }, { "Film": "Leap Year", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 49, "Profitability": 1.71, "Rating": 21, "Worldwide Gross": 32.59, "Year": 2010 }, { "Film": "Letters to Juliet", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 62, "Profitability": 2.639333333, "Rating": 40, "Worldwide Gross": 79.18, "Year": 2010 }, { "Film": "License to Wed", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 55, "Profitability": 1.98, "Rating": 8, "Worldwide Gross": 69.30, "Year": 2007 }, { "Film": "Life as We Know It", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 62, "Profitability": 2.53, "Rating": 28, "Worldwide Gross": 96.16, "Year": 2010 }, { "Film": "Love & Other Drugs", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 55, "Profitability": 1.81, "Rating": 48, "Worldwide Gross": 54.53, "Year": 2010 }, { "Film": "Love Happens", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 40, "Profitability": 2.00, "Rating": 18, "Worldwide Gross": 36.08, "Year": 2009 }, { "Film": "Made of Honor", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 61, "Profitability": 2.64, "Rating": 13, "Worldwide Gross": 105.96, "Year": 2008 }, { "Film": "Mamma Mia!", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 76, "Profitability": 9.23, "Rating": 53, "Worldwide Gross": 609.47, "Year": 2008 }, { "Film": "Marley and Me", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 77, "Profitability": 3.746781818, "Rating": 63, "Worldwide Gross": 206.073, "Year": 2008 }, { "Film": "Midnight in Paris", "Genre": "Romance", "Lead Studio": "Sony", "Audience Score %": 84, "Profitability": 8.74, "Rating": 93, "Worldwide Gross": 148.66, "Year": 2011 }, { "Film": "Miss Pettigrew Lives for a Day", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 70, "Profitability": 0.25, "Rating": 78, "Worldwide Gross": 15.17, "Year": 2008 }, { "Film": "Monte Carlo", "Genre": "Romance", "Lead Studio": "20th Century Fox", "Audience Score %": 50, "Profitability": 1.98, "Rating": 38, "Worldwide Gross": 39.66, "Year": 2011 }, { "Film": "Music and Lyrics", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 70, "Profitability": 3.64, "Rating": 63, "Worldwide Gross": 145.89, "Year": 2007 }, { "Film": "My Week with Marilyn", "Genre": "Drama", "Lead Studio": "The Weinstein Company", "Audience Score %": 84, "Profitability": 0.82, "Rating": 83, "Worldwide Gross": 8.25, "Year": 2011 }, { "Film": "New Year's Eve", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 48, "Profitability": 2.53, "Rating": 8, "Worldwide Gross": 142.04, "Year": 2011 }, { "Film": "Nick and Norah's Infinite Playlist", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 67, "Profitability": 3.35, "Rating": 73, "Worldwide Gross": 33.52, "Year": 2008 }, { "Film": "No Reservations", "Genre": "Comedy", "Lead Studio": "", "Audience Score %": 64, "Profitability": 3.30, "Rating": 39, "Worldwide Gross": 92.60, "Year": 2007 }, { "Film": "Not Easily Broken", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 66, "Profitability": 2.14, "Rating": 34, "Worldwide Gross": 10.7, "Year": 2009 }, { "Film": "One Day", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 54, "Profitability": 3.68, "Rating": 37, "Worldwide Gross": 55.24, "Year": 2011 }, { "Film": "Our Family Wedding", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 49, "Profitability": null, "Rating": 14, "Worldwide Gross": 21.37, "Year": 2010 }, { "Film": "Over Her Dead Body", "Genre": "Comedy", "Lead Studio": "New Line", "Audience Score %": 47, "Profitability": 2.07, "Rating": 15, "Worldwide Gross": 20.71, "Year": 2008 }, { "Film": "P.S. I Love You", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 82, "Profitability": 5.10, "Rating": 21, "Worldwide Gross": 153.09, "Year": 2007 }, { "Film": "Penelope", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 74, "Profitability": 1.38, "Rating": 52, "Worldwide Gross": 20.74, "Year": 2008 }, { "Film": "Rachel Getting Married", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 61, "Profitability": 1.38, "Rating": 85, "Worldwide Gross": 16.61, "Year": 2008 }, { "Film": "Remember Me", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 70, "Profitability": 3.49, "Rating": 28, "Worldwide Gross": 55.86, "Year": 2010 }, { "Film": "Sex and the City", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 7.22, "Rating": 49, "Worldwide Gross": 415.25, "Year": 2008 }, { "Film": "Sex and the City 2", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 49, "Profitability": 2.88, "Rating": 15, "Worldwide Gross": 288.35, "Year": 2010 }, { "Film": "She's Out of My League", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 60, "Profitability": 2.44, "Rating": 57, "Worldwide Gross": 48.81, "Year": 2010 }, { "Film": "Something Borrowed", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": null, "Profitability": 1.71, "Rating": null, "Worldwide Gross": 60.18, "Year": 2011 }, { "Film": "Tangled", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 88, "Profitability": 1.36, "Rating": 89, "Worldwide Gross": 355.08, "Year": 2010 }, { "Film": "The Back-up Plan", "Genre": "Comedy", "Lead Studio": "CBS", "Audience Score %": 47, "Profitability": 2.20, "Rating": 20, "Worldwide Gross": 77.09, "Year": 2010 }, { "Film": "The Curious Case of Benjamin Button", "Genre": "Fantasy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 1.78, "Rating": 73, "Worldwide Gross": 285.43, "Year": 2008 }, { "Film": "The Duchess", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 68, "Profitability": 3.20, "Rating": 60, "Worldwide Gross": 43.30, "Year": 2008 }, { "Film": "The Heartbreak Kid", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 41, "Profitability": 2.12, "Rating": 30, "Worldwide Gross": 127.76, "Year": 2007 }, { "Film": "The Invention of Lying", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 1.75, "Rating": 56, "Worldwide Gross": 32.4, "Year": 2009 }, { "Film": "The Proposal", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 74, "Profitability": 7.86, "Rating": 43, "Worldwide Gross": 314.7, "Year": 2009 }, { "Film": "The Time Traveler's Wife", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 65, "Profitability": 2.59, "Rating": 38, "Worldwide Gross": 101.33, "Year": 2009 }, { "Film": "The Twilight Saga: New Moon", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 78, "Profitability": 14.19, "Rating": 27, "Worldwide Gross": 709.82, "Year": 2009 }, { "Film": "The Ugly Truth", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 5.40, "Rating": 14, "Worldwide Gross": 205.3, "Year": 2009 }, { "Film": "Twilight", "Genre": "Romance", "Lead Studio": "Summit", "Audience Score %": 82, "Profitability": 10.18, "Rating": 49, "Worldwide Gross": 376.66, "Year": 2008 }, { "Film": "Twilight: Breaking Dawn", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 6.38, "Rating": 26, "Worldwide Gross": 702.17, "Year": 2011 }, { "Film": "Tyler Perry's Why Did I get Married", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 47, "Profitability": 3.72, "Rating": 46, "Worldwide Gross": 55.862886, "Year": 2007 }, { "Film": "Valentine's Day", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 54, "Profitability": 4.18, "Rating": 17, "Worldwide Gross": 217.57, "Year": 2010 }, { "Film": "Waiting For Forever", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 53, "Profitability": 0.005, "Rating": 6, "Worldwide Gross": 0.025, "Year": 2011 }, { "Film": "Waitress", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 67, "Profitability": 11.08, "Rating": 89, "Worldwide Gross": 22.17, "Year": 2007 }, { "Film": "WALL-E", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 89, "Profitability": 2.89, "Rating": 96, "Worldwide Gross": 521.28, "Year": 2008 }, { "Film": "Water For Elephants", "Genre": "Drama", "Lead Studio": "20th Century Fox", "Audience Score %": 72, "Profitability": 3.081421053, "Rating": 60, "Worldwide Gross": 117.094, "Year": 2011 }, { "Film": "What Happens in Vegas", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 72, "Profitability": 6.26, "Rating": 28, "Worldwide Gross": 219.36, "Year": 2008 }, { "Film": "When in Rome", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 44, "Profitability": 0, "Rating": 15, "Worldwide Gross": 43.04, "Year": 2010 }, { "Film": "You Will Meet a Tall Dark Stranger", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 35, "Profitability": 1.21, "Rating": 43, "Worldwide Gross": 26.66, "Year": 2010 }, { "Film": "Youth in Revolt", "Genre": "Comedy", "Lead Studio": "The Weinstein Company", "Audience Score %": 52, "Profitability": 1.09, "Rating": 68, "Worldwide Gross": 19.62, "Year": 2010 }, { "Film": "Zack and Miri Make a Porno", "Genre": "Romance", "Lead Studio": "The Weinstein Company", "Audience Score %": 70, "Profitability": 1.74, "Rating": 64, "Worldwide Gross": 41.94, "Year": 2008 } ]
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }