如何使用HighCharts创建条形图而不是线形图？

Question

我使用DotNetHighCharts来制作HighChart的图表。这个例子，我发现做月度数据的折线图：

 Highcharts monthlyChart = new Highcharts("chart") 
     .SetXAxis(new DotNet.Highcharts.Options.XAxis 
     { 
      Categories = 
       new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } 

     }) 
     .SetSeries(new DotNet.Highcharts.Options.Series 
     { 
      Data = new DotNet.Highcharts.Helpers.Data(new object[] { 20, 30, 40, 50, 20, 60, 14, 72, 30, 35, 10, 20, 25 }) 
     }); 

我试图new HighCharts("bar")但它仍然使一个折线图。

Answer 1

我安装使用使用Visual Studio的软件包管理器控制台下面的命令Highcharts，该安装的DotNet.Highcharts新版本 - 4.0.0

Install-Package DotNet.Highcharts 

然后创建下面的视图（不要忘了包括JS文件）。

@{ 
    ViewBag.Title = "Sample"; 
} 
@using DotNet.Highcharts; 
@using DotNet.Highcharts.Options; 
@using DotNet.Highcharts.Helpers; 

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js" type="text/javascript"></script> 
@{ 
    Highcharts chrt = new Highcharts("chart") 
        .SetXAxis(new XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) 
        .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Sales" } }) 
        .SetSeries(new Series { Data = new Data(new object[] { 20, 30, 40, 50, 20, 60, 14, 72, 30, 35, 10, 20 }), Name = "Sales" }) 
        .SetTitle(new Title { Text = "Sales Data" }) 
        .InitChart(new DotNet.Highcharts.Options.Chart { DefaultSeriesType = DotNet.Highcharts.Enums.ChartTypes.Column }); 
} 

@(chrt) 

输出功率为 -

为Highcharts

样品可以从here下载。