如何在饼图上实现数据库中的颜色?

时间:2017-08-01 08:07:46

标签: javascript c# sql-server

在我的数据库中,我将颜色存储为字符串,我需要将这些颜色转换为十六进制并在饼图上实现。有没有一个好方法呢?
这是我的javascript代码。有两个数组(系列和颜色),我存储数据。

   <script type="text/javascript">
    $(function () {
        $.ajax({
            url: 'getItems',
            dataType: "json",
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            async: false,
            processData: false,
            cache: false,
            delay: 15,
            success: function (data) {

                var series = new Array();
                var colors = new Array();
                for (var i in data) {
                    var serie = new Array(data[i].name, data[i].y, data[i].color);

                    series.push(serie);
                    colors.push(serie[data[i].color]);

                }
                DrawPieChart(series,colors);
            },
            error: function (xhr) {
                alert('error');
            }
        });
    });

    function DrawPieChart(series,colors) {
        console.log(series,colors);
       Highcharts.chart('container', {

            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 1, 
                plotShadow: false,


            },
            title: {
                text: ' Vehicle Summary'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },

            colors: [colors],
            series: [{

                type: 'pie',
                name: 'Task Status',
                data: series
            }]
        });
    }
    </script>

这是我的方法,它采用数据库过程中名为“percentage”的项目的值。

public ActionResult getItems()
    {
        List<itemViewModel> result = new List<itemViewModel>();
        result = unitOfWork.ExecuteSP<itemViewModel>("[percentage]");

        var res = result.OfType<string>();

        foreach (var dr in res)
        {
            itemViewModel summary = new itemViewModel();
            summary.name = dr[0].ToString().Trim();
            summary.y = Convert.ToDecimal(dr[1]);
            // color
            result.Add(summary);

        }

        return Json(result, JsonRequestBehavior.AllowGet);
    }

另外,这是我的模特

public class itemViewModel
{
    public string name { get; set; }
    public decimal? y { get; set; }
    public string color { get; set; }

}

1 个答案:

答案 0 :(得分:0)

你可以通过设置饼图的颜色属性的表达式,通过转到系列属性 - &gt;填充---&gt;单击fx并给出表达式来完成此操作。即使我已经给你这个解决方案,但我不认为你的方法是正确的

您所关注的approch不是最好的方法,不需要在数据库中存储颜色,只需从其他值中以颜色表达式计算