使用MVC3根据Highchart条形图中的值更改条形颜色 [英] Change color of bars depending on value in Highchart bar-chart with MVC3

问题描述

我正在将Dotnet Highchart与MVC3配合使用

I am using Dotnet Highchart with MVC3

我目前正在使用如下所示的图:

I am currently working with a diagram that looks like this:

我正在尝试修改我的代码，以便可以根据条码的数量来更改条码的颜色.我还想知道如何删除图像上的"Snittbetyg"按钮.

I am trying to modify my code so I can change color on the bars depending on what number they have. I also wonder how I can remove the button "Snittbetyg" as you see can on the image.

这是我的代码:

 public ActionResult OfficeStatistic()
        {
            {

                Highcharts chart1 = new Highcharts("chart1")
                    .SetXAxis(new XAxis { Categories = new[] { "Ödmjukhet", "Engagemang", "Kompetens", "Lönsamhet" } })
                    .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Betygskalan" } })
                    .SetSeries(new Series { Data = new Data(new object[] { 1, 8, 9, 6 }), Name = "Snittbetyg" })
                    .SetTitle(new Title { Text = "Örebro Statistik" })
                    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column });

                return View(chart1);

            }

        }

感谢您提供任何帮助.

提前谢谢！

推荐答案

我没有使用Highchart，但可以从其

I haven't used Highchart but you can download examples from their codeplex page. It looks like both of your requirements can be achieved easily.

删除"Snittbetyg"按钮

禁用图例:

.SetLegend(new Legend { Enabled = false });

添加颜色

对于系列数据，使用点而不是数字:

For the series data use points instead of just the numbers:

Data data = new Data(new[]
{
    new Point { Y = 1, Color = System.Drawing.Color.Red },
    new Point { Y = 8, Color = System.Drawing.Color.Blue },
    new Point { Y = 9, Color = System.Drawing.Color.Green },
    new Point { Y = 6, Color = System.Drawing.Color.Black }
});

Highcharts chart1 = new Highcharts("chart1")
    .SetXAxis(new XAxis { Categories = new[] { "Ödmjukhet", "Engagemang", "Kompetens", "Lönsamhet" } })
    .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Betygskalan" } })
    .SetSeries(new Series { Data = data, Name = "Snittbetyg" })
    .SetTitle(new Title { Text = "Örebro Statistik" })
    .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
    .SetLegend(new Legend { Enabled = false });

---

似乎没有一种内置的方法可以使Highchart根据y值自动为条形着色.我相信您必须自己选择颜色，例如:

---

There doesn't seem to be a built in way to make highchart automatically colour the bar based on the y-value. I believe you would have to pick the colour yourself, e.g:

    private System.Drawing.Color GetBarColour(int value)
    {
        if (value < 5) return System.Drawing.Color.Red;
        if (value > 7) return System.Drawing.Color.Green;
        return System.Drawing.Color.Orange;
    }

    public ActionResult OfficeStatistic()
    {
        {
            var dataItems = new[] {1, 8, 9, 6};
            Data data = new Data(
                dataItems.Select(y => new Point {Color = GetBarColour(y), Y = y}).ToArray()
            );

            Highcharts chart1 = new Highcharts("chart1")
                .SetXAxis(new XAxis { Categories = new[] { "Ödmjukhet", "Engagemang", "Kompetens", "Lönsamhet" } })
                .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Betygskalan" } })
                .SetSeries(new Series { Data = data, Name = "Snittbetyg" })
                .SetTitle(new Title { Text = "Örebro Statistik" })
                .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
                .SetLegend(new Legend { Enabled = false });

这篇关于使用MVC3根据Highchart条形图中的值更改条形颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！