如何使用DotNet HighChart在ASP.Net 5/MVC 6

Question

我試圖在ASP.Net 5/MVC 6項目中使用DotNet HighChart庫將圖表添加到頁面。

我已經導入來自的NuGet庫，並添加上_layout鑑於素文字引用：

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script> 
<script type="text/javascript" src="~/lib/highcharts/highcharts.js"></script> 

我已經定義了一個ViewModel類持有圖表：

public class IndexReportViewModel 
{ 
    public Highcharts Chart { get; set; } 
} 

創造並在控制器中填充庫存示例：

public IActionResult Index() 
    { 
     IndexReportViewModel ivm = new IndexReportViewModel(); 

     Highcharts chart = new Highcharts("chart") 
      .SetXAxis(new XAxis 
      { 
       Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } 
      }) 
      .SetSeries(new Series 
      { 
       Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }) 
      }); 

     ivm.Chart = chart; 
     return View(ivm); 
    } 

控制器具有必需的命名空間：

using DotNet.Highcharts; 
using DotNet.Highcharts.Options; 
using DotNet.Highcharts.Helpers; 

最後我引用它在索引視圖：

@model TimeCheckBES.ViewModels.Reports.IndexReportViewModel 

<p>My Chart</p> 
    @Model.Chart 

當它只是似乎顯示HighCharts類型的頁面加載對象，如：

任何想法？我試過了：

• 將js引用添加到視圖本身而不是_layout（我已經在dev模式下檢查了頁面，並且它們正在加載）。
• 在索引視圖中調用@Model.Chart.ToHtmlString()。
• 不使用ViewModel並直接返回圖表對象。

我想我必須錯過一些關於js腳本工作的方式，但不能想到它可能是什麼。

編輯：其他信息

我也直接加入了命名空間的觀點，雖然編譯器不認爲他們是必要的。

@using DotNet.Highcharts; 
@using DotNet.Highcharts.Options; 
@using DotNet.Highcharts.Helpers; 

Answer 1

我刪除了我以前的答案。 Highcharts目前不支持ASP.NET 5/MVC 6。所以，你有兩個選擇：選擇一個你可以等待它更新他們的東西或兩個，你可以使用舊的框架做一個單獨的項目，並在當前項目中鏈接到它。 http://dotnethighcharts.codeplex.com/這裏是他們的codeplex網站的鏈接。如果你想嘗試使它工作，這有例子。順便說一下，我已經嘗試過了，而且它的工作量超過了它的價值。

您還可以選擇使用JQuery來獲得相同的結果。

的JavaScript

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'area' 
     }, 
     title: { 
      text: 'Historic and Estimated Worldwide Population Growth by Region' 
     }, 
     subtitle: { 
      text: 'Source: Wikipedia.org' 
     }, 
     xAxis: { 
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Billions' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value/1000; 
       } 
      } 
     }, 
     tooltip: { 
      shared: true, 
      valueSuffix: ' millions' 
     }, 
     plotOptions: { 
      area: { 
       stacking: 'normal', 
       lineColor: '#666666', 
       lineWidth: 1, 
       marker: { 
        lineWidth: 1, 
        lineColor: '#666666' 
       } 
      } 
     }, 
     series: [{ 
      name: 'Asia', 
      data: [502, 635, 809, 947, 1402, 3634, 5268] 
     }, { 
      name: 'Africa', 
      data: [106, 107, 111, 133, 221, 767, 1766] 
     }, { 
      name: 'Europe', 
      data: [163, 203, 276, 408, 547, 729, 628] 
     }, { 
      name: 'America', 
      data: [18, 31, 54, 156, 339, 818, 1201] 
     }, { 
      name: 'Oceania', 
      data: [2, 2, 2, 6, 13, 30, 46] 
     }] 
    }); 
}); 

HTML

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script async src="//jsfiddle.net/arx54ufv/embed/"></script> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>