Как элегантно построить графики в ASP.NET MVC 3, используя Highcharts? - PullRequest
Новая
       12

Как элегантно построить графики в ASP.NET MVC 3, используя Highcharts?

0 голосов
/ 07 марта 2012

Я работаю с highcharts и MVC 3 уже два года (я никогда не делал ничего сложного, просто загружал данные и заставлял их работать), и я работал с двумя различными сценариями:

  • Код диаграммы, написанный непосредственно в представлении, загружающий данные через Json
  • Html-помощник, ответственный за построение диаграммы

Html-вспомогательный подход кажется мне более элегантным выбором.... но потом, просто чтобы проиллюстрировать вам, ребята, вот как это выглядит (только часть): 

public static string DisplayChart(
            this HtmlHelper helper,
            ChartOptions options,
            TimedChartSeries[] data)
{
    string[] axisList = data.GroupBy(t => t.Unit).Select(t => t.Key).ToArray();
    string result = "";
    result += "<script type=\"text/javascript\">\n";
    result += "var " + options.ChartName + ";\n";
    result += "$(document).ready(function() {\n";
    result += options.ChartName + "= new Highcharts.Chart({\n";
    result += "chart: {renderTo: '" + options.DivName + "',zoomType: ''},\n";
    result += "title: { text: '" + options.Title + "'},\n";
    result += "subtitle: {text: '" + options.SubTitle + "'},\n";

    result += "xAxis: { type: 'datetime'," +
        "\n dateTimeLabelFormats: {month: '%e. %b', year: '%b' },"
        + "labels:{rotation: -45}\n},\n";


    string axes = "";

    for (int i = 0; i < axisList.Length; i++)
    {
        var temporaryData = data.First(t => t.Unit == axisList[i]);
        if (i != 0)
            axes += ", ";

        axes += "{labels:{\n " +
            "formatter : function(){return this.value + '" + temporaryData.Unit + "';},\n" +
            "style:{color:'#" + temporaryData.Color.Name.Remove(0, 2) + "'}},\n" +
            "title:{text:'',style:{color:'#" + temporaryData.Color.Name.Remove(0, 2) + "'}},\n" +
            "}\n";
    }

    result += "yAxis: [\n" + axes + "],\n";

    string units = "";

    for (int i = 0; i < data.Length; i++)
    {
        if (i != 0)
            units += ", ";

        units += "'" + data[i].Title + "': '" + data[i].Unit + "'\n";
    }

    result += "tooltip:{\nshared: true,\n backgroundColor: 'none' ,\nborderColor: 'none'," +
        "\nshadow:false\n ,crosshairs: true,\n" +
        "formatter: function() {var s = '<table class=\"table-list\"><tr><th>Hora</th><th>'+ test(this.x) +'</th></tr>';" +
        "\n$.each(this.points, function(i, point) {" +
        "\ns += '<tr><td>'+point.series.name + '</td><td>'+point.y+'</td></tr>'});s+='</table>';" +
        "\n$('#tooltip').html(s);}},";

    result += "lang: {" + 
    "months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'," +
    "'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']," +
    "weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']},";

    string series = "";
    int x = 0;
    for (int j = 0; j < axisList.Length; j++)
    {

        var temporaryData = data.Where(t => t.Unit == axisList[j]).ToArray();
        for (int i = 0; i < temporaryData.Length; i++)
        {
            if (x > 0)
                series += ", ";
            series += "{name: '" + temporaryData[i].Title + "',\n color: '#" + temporaryData[i].Color.Name.Remove(0, 2) +
                "', \ntype: '" + temporaryData[i].Type + "',\nunit:'" + temporaryData.First().Unit + "', \nyAxis:" + j + " , \ndata:[" + FromArrayToString(temporaryData[i].Data) +
                "],  marker: { enabled: false}}\n";
            x++;
        }
    }



    result += "series: [\n" + series + "]\n";

    result += "});});";

    result += "\nfunction test(i)\n{\nvar j = new Date(i + 2*60*60*1000);\n" +
        "return new Date(i + 3*60*60*1000).format('d/m/Y H:i:s.')+j.getMilliseconds();\n}\n</script>";

    result += "\n<div id=\"" + options.DivName + "\" style=\"width:" + options.Width + ";height: " + options.Height + "\"></div>" +
        "<div id=\"tooltip\"></div>";

    return result;
}

Это действительно просто вызвать этого помощника: 

@Html.Raw(Html.DisplayChart((ChartOptions)Model.Options,(TimedChartSeries[])Model.Series))

Как вы, ребята, видите, я должен использовать помощник Html.Raw, чтобы заставить его работать ... это проблема № 1 (и она, вероятно, имеет простое решение).Но вторая проблема действительно велика: график становится полностью привязанным к моей области.Если бы я хотел построить, скажем, гистограмму, отображающую данные за последние 3 года в месяцах (каждый месяц представлен гистограммой), было бы невозможно использовать этот помощник.

И это также выглядитУжасно.

Итак, ребята, какой вариант вы считаете более элегантным, подход Json или Helper?

1 Ответ

2 голосов
/ 08 марта 2012

Об использовании Html.Raw и простом решении:

Измените свою функцию на 

public static HtmlString DisplayChart(this HtmlHelper helper, ...)
{
    ...
    return new HtmlString(result);
}

Затем вы можете использовать @Html.DisplayChart(...) в ваших видах бритвы.

Кроме того, пожалуйста, убедитесь, что options.DivName, options.Title, options.SubTitle и т. Д. Правильно экранированы - заголовок, такой как Любимый график у всех , нарушит вывод.

...