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

Question

我用DotNetHighCharts制作海图。我发现的这个例子制作了一个月度数据的线状图：

        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的包管理器控制台安装了以下命令，这个命令安装了新版本的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)

结果是-

​

​

高级图表的示例可以从这里下载。