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

时间:2015-06-08 19:53:53

标签: c# asp.net-mvc highcharts

我正在使用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"),但它仍然制作折线图。

1 个答案:

答案 0 :(得分:3)

我使用以下命令使用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)

输出是 -

enter image description here

Highcharts的样本可以从here下载。