HighCharts 使用 SQL 数据库中的数据填充饼图

Question

我是网页设计的新手，我正在尝试使用 C# 使用 SQL 数据库中的数据填充一个 highcharts 饼图。我已经成功地为条形图完成了它，但在使用饼图时遇到了问题。基本上我有一个表 tblReport1，其中包含 2 个字段 CustomerType 和 TotalOrders

我可以让它引入值，但我不能让我的切片重命名为 CustomerType 字段中的数据。我在这个论坛上尝试了一些建议，但无法让它们发挥作用。以下是我的代码，如有任何建议，将不胜感激。

private void Report1()
{
    dsSeries = BindData();

    if (dsSeries == null) return;

    foreach (DataRow dr in dsSeries.Tables[0].Rows)
    {
        hidXCategories11.Add(dr["CustomerType"]);
    }

    foreach (DataRow dr1 in dsSeries.Tables[0].Rows)
    {
        hidValues11.Add(Convert.ToInt32(dr1["TotalOrders"]));
        yValues = hidValues11.ToArray(typeof(object)) as object[];
    }


    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
    .InitChart(new Chart { PlotShadow = false })
    .SetTitle(new Title { Text = "Orders by Customer Type" })
    .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' Orders'; }" })
    .SetPlotOptions(new PlotOptions
    {
        Pie = new PlotOptionsPie
        {
            ShowInLegend = true,
            AllowPointSelect = true,
            DataLabels = new PlotOptionsPieDataLabels
            {
                Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.y; }"
            }
        }
    })

    .SetSeries(new[]
       {
               new Series { Type = ChartTypes.Pie, Name = "help!", Data = new Data(yValues) }
       });



    ltrChart.Text = chart.ToHtmlString();

}

Answer 1

看http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-basic/饼图数据的格式是两部分，标签和数据项。

在你看来，系列数据只是一个整数数组。

所以我认为您需要更改您的 Series 对象以接受不同格式的数据。

遗憾的是，Highcharts.Net 文档中的示例有点缺乏，而且似乎没有这样的示例，因此您可能需要查看智能感知提供的内容。

但最重要的是，您的饼图块需要在数据系列中命名，而不是作为类别或其他任何名称。

编辑一些示例代码

我正在查看他们的网站，他们在那里有一个帮助论坛，其中包含以下示例代码

       series.Add(new Serie
        {
            data = new object[] { 
                new object[] { "Firefox", 45 }, 
                new object[] { "IE", 24.8 }, 
                new object[] { "Chrome", 12.8 },
                new object[] { "Safari", 8.5 }, 
                new object[] { "Opera", 5.2 }, 
                new object[] { "Outros", 3.7 } 
            }
        });

来源：http://highcharts.codeplex.com/discussions/269347

我无法对此进行测试，但从帖子的上下文来看，它应该可以完成这项工作。