第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

僅使用Javascript填充谷歌圖表

僅使用Javascript填充谷歌圖表

回首憶惘然 2022-08-27 09:42:18
我在我的C#項(xiàng)目中使用Google Charts API（使用CefSharp的WebBrowser），并且它適用于硬編碼到它的數(shù)據(jù)，但是每當(dāng)我嘗試使用data.addRows（）填充它時(shí)，我都會(huì)遇到問題。我需要一些簡單的東西，比如外部的csv /json，所以可以在C#中運(yùn)行（WebBrowser真的很有限，有時(shí)是錯(cuò)誤的），但是每個(gè)解決方案都告訴我通過php服務(wù)器或類似更“復(fù)雜”的東西來做到這一點(diǎn)。那么，有沒有辦法只使用JavaScript和外部文件（或不同但可行的文件）來填充該圖表？如果有用，那就是代碼：<html>  <head>    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    <script type="text/javascript">      google.charts.load('current', {packages:["orgchart"]});      google.charts.setOnLoadCallback(drawChart);      function drawChart() {        var data = new google.visualization.DataTable();        data.addColumn('string', 'Name');        data.addColumn('string', 'Manager');        data.addColumn('string', 'ToolTip');        // For each orgchart box, provide the name, manager, and tooltip to show.        data.addRows([['Alice', 'Mike', ''],['Bob', 'Jim', 'Bob Sponge'],['Carol', 'Bob', '']]);        // Create the chart.        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));        // Draw the chart, setting the allowHtml option to true for the tooltips.        chart.draw(data, {'allowHtml':true});      }   </script>    </head>  <body>    <div id="chart_div"></div>  </body></html>Obs：CefSharp WebBrowser只是將上面的代碼作為普通的HTML文件調(diào)用，并在C#應(yīng)用程序中運(yùn)行它。謝謝！
查看完整描述

1 回答

?
holdtom

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊

我做過類似的事情，但我一直在使用谷歌圖表API的方法，但我相信這也可以類似地完成。不過，您需要依靠 C#。我想徹底，所以這是一個(gè)很大的問題。我非常樂意澄清，因?yàn)槲蚁嘈胖辽倨渲幸恍┐朕o不當(dāng)/令人困惑。arrayToDataTable()

斷續(xù)器

  1. 創(chuàng)建一個(gè)類來保存數(shù)據(jù)點(diǎn)，并創(chuàng)建一種將它們表示為列表的方法。

  2. 在 Controller 類中，創(chuàng)建一個(gè)返回列表的方法，該列表包含表示為列表的數(shù)據(jù)點(diǎn)。將列表列表轉(zhuǎn)換為 JSON 并將其發(fā)布到 URL 終結(jié)點(diǎn)

  3. 在 cshtml 中使用 ajax 從該終結(jié)點(diǎn)讀取 json 數(shù)據(jù)

  4. 將讀取 json 放入 AddRows 方法中。

  5. 黨

這將涉及：.cshtml，主控制器以及“無論在哪里提取數(shù)據(jù)”。

  1. 無論您在何處提取數(shù)據(jù)

我的情況有點(diǎn)復(fù)雜。但基本上我有一個(gè)方法，它只返回一個(gè)類型的列表，用于保存這些對(duì)象，表示為列表。（例如。object[<Timestamp>,<Temperature>,<Humidity>])

public class WeatherEntry

{

       public string Timestamp { get; set; } 

       public double TEMPERATURE { get; set; } 

       public double Humidity { get; set; } 

... Other stuff ...

}


如果可以生成數(shù)據(jù)點(diǎn)列表（表示為 c# 端的列表），則表示您從事業(yè)務(wù)。


控制器類

假設(shè)您使用的是 ASP.net MVC，您將有一個(gè)支持控制器類來保存您的控制 C#


一旦你有了一個(gè)類型對(duì)象的列表，其中包含表示為列表的數(shù)據(jù)點(diǎn)，你可以使用Newtonsoft.Json的方法非常輕松地將其轉(zhuǎn)換為JSON，如下所示：JSonConvert.SerializeObject()


          public ActionResult GetChartData_All_Week()

          {

              var dataPointsList = this.myDataSource.GetMyDataPointList();

              var convertedJson = JsonConvert.SerializeObject(dataPointsList, new JsonSerializerSettings()

              {

                  //Not Needed, I just like to throw out any values that are null.

                  NullValueHandling = NullValueHandling.Ignore 

              }); 


              return Content(convertedJson);

重要我們將在下一步中使用ajax，因此我們需要此操作結(jié)果方法上方的神奇屬性，如下所示：[Route]


Route("Index/Path/To/Post/To")]

public ActionResult GetChartData_All_Week()

所有困難的事情現(xiàn)在都完成了。如果您啟動(dòng)應(yīng)用程序并訪問上面定義的路由（對(duì)我來說是），您應(yīng)該在那里看到類似于以下內(nèi)容的JSON數(shù)據(jù)：/Index/Charts/All/Week


[["07/04/2020",25.5,44.0],["07/05/2020",25.600000381469727,45.0],["07/06/2020",25.5,44.0],...["07/08/2020",25.5,43.0]]

如果你不這樣做，那么下一部分就不會(huì)成功。永遠(yuǎn)記住，這是我們需要的列表列表！


.cshtml，AJAX和jQuery魔術(shù)大部分圖表已經(jīng)存在。如果它正在處理您發(fā)布的示例數(shù)據(jù)，這將是超級(jí)ez。在您的方法中，您將在調(diào)用之前添加以下內(nèi)容。drawChart()data.AddRows()

var jsonData = $.ajax({

                url:'Index/Path/To/Post/To',

                dataType:"json",

                async:false,

                type:"GET"

                }).responseText;

var asJson = JSON.parse(jsonData);

data.AddRows(asJson);

現(xiàn)在你應(yīng)該擁有它！頁面和數(shù)據(jù)源將需要刷新以繪制添加的任何新數(shù)據(jù)的圖表，但這應(yīng)該為您提供動(dòng)態(tài)大小的點(diǎn)列表。我遇到的最困難的部分是將數(shù)據(jù)格式化為列表列表。我建議添加一個(gè)方法，以將所有重要的數(shù)據(jù)點(diǎn)按順序放入列表中*。這使得做這樣的事情變得很好，很容易：CS List<object> ToList()Weather_Entry


public List<object> GetMyDataPointList(){

     var myDataPointList = new List<MyDataPointType>();

     myDataPointList = this.GetMyListOfDataPoints();

     List<object> turnMeIntoJSON = new List<object>();

     myDataPointList.ForEach(dp => turnMeIntoJSON.Add(dp.ToList));

    return turnMeIntoJSON;

}


查看完整回答
反對(duì) 回復(fù) 2022-08-27
  • 1 回答
  • 0 關(guān)注
  • 82 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)