c# - 根据 MVC3 的 Highchart 条形图中的值更改条形的颜色

Question

我正在将 Dotnet Highchart 与 MVC3 一起使用

我目前正在使用如下图：

我正在尝试修改我的代码，以便我可以根据它们的数量来更改条形上的颜色。我还想知道如何删除您在图像上看到的按钮“Snittbetyg”。

这是我的代码：

 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);

            }

        }

任何形式的帮助表示赞赏。

提前致谢！

score 7 · Accepted Answer

我没有使用过 Highchart，但你可以从他们的codeplex page下载示例。看起来您的两个要求都可以轻松实现。

删除“Snittbetyg”按钮

禁用图例：

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

添加颜色

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

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 值自动为条形着色。我相信您必须自己选择颜色，例如：

    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 });

score 1 · Accepted Answer

首先，定义一个元组列表第一项是颜色，第二项是点值

List<Tuple<string, Object>> dataItems = new List<Tuple<string, Object>>();

我正在用 swtich 传递价值，这不是必需的

SqlDataReader 阅读器 = myComm.ExecuteReader();

    if (reader.HasRows)
    {               
        string colorName ="";
        while (reader.Read())                   
        {
            switch ((string)reader.GetValue(1))
            {
                case "Total Employee(s)":
                    colorName = "Blue";
                    break;
                case "Present":                       
                    colorName = "Green";
                    break;
                case "Late":
                case"Absent":
                case "During Less":
                case "Early Going":
                    colorName = "Red";
                    break;
                case "Leave":
                    colorName = "Orange";
                    break;
                default:
                    colorName = "Gray";
                    break;
            }

            dataItems.Add(new Tuple<string, Object>(colorName, reader.GetValue(2)));
}

现在，最后将数据添加到系列对象中

new Series{
 Name = "Employees",
 Data  = new Data(
    dataItems.Select(y => new Point { 
     Color = System.Drawing.Color.FromName(y.Item1), 
     Y = (int)y.Item2 }).ToArray()
    )               
 }

c# - 根据 MVC3 的 Highchart 条形图中的值更改条形的颜色

2 回答 2

Related

Reference