LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Syn256

C# ASP.NETでHighchartsを利用するサンプル

Last updated at Posted at 2016-08-02

[サンプルプロジェクトのダウンロード] (https://github.com/Synashida/DotNetHighchartSample)

実行イメージはこちら

sample-image.png

数年前に書いたものだったのですが、Visual Studioのバージョンもだいぶ上がったので書き直してみました。

サンプルプロジェクトの実行方法

  1. [githubからダウンロード] (https://github.com/Synashida/DotNetHighchartSample)
  2. HighchartSample.slnからVSを起動
  3. Nugetの復元
  4. 実行

サンプルを見かける時によく、HighCharts部分だけ記載されていて何のパッケージを参照するだとか、JSをどうやってBundleするだとか、ほんとの最初に使う時につまづいたりします。
そして情報がほしいときというのは概ねそういうフェーズだったりします。

なので動くサンプルの提供を行っていますので、詳細はサンプルを動かしてみていただければと思います。

その上でコードのポイント

App_Start¥BundleConfig.cs
            bundles.Add(new ScriptBundle("~/bundles/highcharts").Include(
                        "~/Scripts/Highcharts-4.0.1/js/highcharts.js"));
Views¥Shared¥_Layout.cshtml
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highchartsサンプル</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/highcharts")
    @RenderSection("scripts", required: false)
</head>
Views¥Home¥Index.cshtml
<div class="row">
    <div class="col-md-12">
        <h2>Line Chart</h2>
        @Html.Raw(ViewData["lineChart"])
    </div>
</div>

下記コードをHighchartsのJSFeildと対比しながら写経していくとをC#の作法に置き換えているだけだというのがわかります。ほんと置き換えしてるだけです。
多少、配列の深さが変わってくるとインスタンスの指定方法に悩むこともありますが、そこはこちらのサンプルを参考にいただければと思います。

Controllers¥HomeController.cs
using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Helpers;
using System.Collections;

namespace HighchartSample.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            CreateLineChart();
            CreateBarChart();
            CreatePieChart();
            return View();
        }

        private void CreateLineChart()
        {
            Highcharts chart = new Highcharts("linechart")
                .InitChart(new Chart
                {
                    DefaultSeriesType = ChartTypes.Line,
                    BackgroundColor = new BackColorOrGradient(
                                                    new Gradient
                                                    {
                                                        LinearGradient = new[] { 0, 0, 0, 400 }
                                                       ,
                                                        Stops = new object[,]
                                                               {
                                                                    {   0, System.Drawing.Color.White }
                                                                    , {1, "#C7DFF5" }
                                                               }
                                                    }),
                    Height = 400
                })
                .SetTitle(new Title
                {
                    Text = "Line Chart Sample",
                    Align = HorizontalAligns.Center,
                    VerticalAlign = VerticalAligns.Top
                })
                .SetXAxis(new XAxis
                {
                    Categories = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                })
                .SetYAxis(new YAxis
                {
                    Title = new YAxisTitle { Text = "気温（℃）" },
                    PlotLines = new[] { new YAxisPlotLines { Value = 0, Width = 1, Color = System.Drawing.Color.AliceBlue } }
                })
                .SetTooltip(new Tooltip { ValueSuffix = "℃" })
                .SetLegend(new Legend
                {
                    Layout = Layouts.Vertical, Align = HorizontalAligns.Right, VerticalAlign = VerticalAligns.Middle, BorderWidth = 0
                })
                .SetSeries(new [] 
                {
                    new Series {
                        Name = "東京",
                        Data = new Data(new object[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })
                    },
                    new Series {
                        Name = "ニューヨーク",
                        Data = new Data(new object[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })
                    },
                    new Series {
                        Name = "ベルリン",
                        Data = new Data( new object[] { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 })
                    },
                    new Series {
                        Name = "ロンドン",
                        Data = new Data(new object[] { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 })
                    }
                });
            ViewData.Add("lineChart", chart.ToHtmlString());
        }

        private void CreateBarChart()
        {
            Highcharts chart = new Highcharts("barchart")
               .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar })
               .SetTitle(new Title { Text = "月間降雨量" })
               .SetSubtitle(new Subtitle { Text = "Source: <a href=\"http://WorldClimate.com\">WorldClimate.com</a>", UseHTML = true })
               .SetXAxis(new XAxis { Categories = new string[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }})
               .SetYAxis(new YAxis
               {
                   Min = 0,
                   Title = new YAxisTitle { Text = "雨量 (mm)" }
               })
               .SetTooltip(new Tooltip {
                   /*
                   HeaderFormat = "<span style=\"font-size:10px\">{point.key}</span><table>",
                   PointFormat = "'<tr><td style=\"color:{ series.color}; padding: 0\">{series.name}: </td>' + '<td style=\"padding:0\"><b>{point.y:.1f} mm</b></td></tr>'",
                   Formatter = "'</table>'",
                   */
                   Shared = true,
                   UseHTML = true
               })
               .SetPlotOptions(new PlotOptions
               {
                   Column = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 }
               })
               .SetSeries(new[] {
                    new Series {
                        Name = "東京",
                        Data = new Data(new object[] { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    },
                    new Series {
                        Name = "ニューヨーク",
                        Data = new Data(new object[] { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 })
                    },
                    new Series {
                        Name = "ベルリン",
                        Data = new Data( new object[] { 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1 })
                    },
                    new Series {
                        Name = "ロンドン",
                        Data = new Data(new object[] { 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2 })
                    }
               });
            ViewData.Add("barChart", chart.ToHtmlString());
        }

        private void CreatePieChart() {
            Highcharts chart = new Highcharts("piechart")
                .InitChart(new Chart
                {
                    DefaultSeriesType = ChartTypes.Pie,
                    PlotBackgroundColor = null,
                    PlotBorderColor = null,
                    PlotShadow = null
                })
                .SetTitle(new Title { Text = "ブラウザサマリ" })
                .SetTooltip(new Tooltip
                {
                    PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"
                })
                .SetPlotOptions(new PlotOptions
                {
                    Pie = new PlotOptionsPie
                    {
                        AllowPointSelect = true,
                        Cursor = Cursors.Pointer,
                        DataLabels = new PlotOptionsPieDataLabels { Enabled = false },
                        ShowInLegend = true
                    }
                })
                .SetSeries(new []
                {
                    new Series
                    {
                        Name = "製品名",
                        Data = new Data(new Point[] {
                            new Point { Name = "Microsoft Internet Explorer", Y = 56.33 },
                            new Point { Name = "Chrome", Y = 24.03, Selected = true, Sliced = true },
                            new Point { Name = "Firefox", Y = 10.38 },
                            new Point { Name = "Safari", Y = 4.77 },
                            new Point { Name = "Opera", Y = 0.91 },
                            new Point { Name = "Others", Y = 0.2 }
                        })
                    }
                });
            ViewData.Add("pieChart", chart.ToHtmlString());
        }
   }
}

お役に立てれば幸いです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?