0

django ベースのプロジェクトに、1 年の 12 か月にわたって 2 つの一連のデータ (予言と確認) を表示する必要があるチャートがあります。

問題は、データが 1 月から始まらない場合 (たとえば)、空のデータで 1 月を表示する必要があることです。

これは、シリーズの 1 つ (prvisiosns) では機能しますが、他の意味では、予測は本来あるべき 2 月から始まりますが、データは 2 月から始まりますが、コンソメテーションはチャートの 1 月から始まります。

特にセクション {% block graph_data %} の下の私のコードを見てください

これが私のコードです：

<script type="text/javascript">
$(document).ready(function() {
   {% if data %}
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'graph',
         {% block graph_type %}defaultSeriesType: 'column',{% endblock %}
         marginRight: 125,
         marginBottom: 25
      },
      title: {
         text: '{% block graph_title %}Consommation{% endblock %}',
         x: -20 //center
      },
      xAxis: {
         {% block graph_xaxis %}
categories: [{% for i in xaxis %}'{{ i|title }}'{% if not forloop.last %},{% endif %}{% endfor %}]
{% endblock %},
      },
      yAxis: {
         title: {
            text: 'Consommation (MWh)'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
         }]
      },
      {% block tooltip %}
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               this.x +'{% block graph_tooltip_unite %}{% endblock %}: '+ this.y.toFixed(2) +' MWh';
         }
      },
      {% endblock %}
      legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'top',
         x: 20,
         y: 100,
         borderWidth: 0
      },
      series: [


  {% block graph_data %}
 {
 name: 'Consommations',
 data: [
        {% for h in data|dictsort:"date__mois" %}
            {{ h.quantite|safe }}/1000
            {% if not forloop.last %},{% endif %}
        {% endfor %}
       ]
  }
     {% if user.profil.is_gold %}
  ,{
 name: 'Prévisions',
 data: [
        {% for h in previsions|dictsort:"mois" %}
            {{ h.mwh|safe }}
            {% if not forloop.last %},{% endif %}
        {% endfor %}
       ]
  }
 {% endif %}
{% endblock %}


      ]

});
{% else %}
    {% if request.POST %}
        $('#graph').html('<div class="aucune_donnee">Aucune donnée disponible pour les critères sélectionnés.</div>');
    {% endif %}
{% endif %}
var blanco = "<div class='blanco'></div>";
$("#graph").append(blanco);
});

これは一週間以来私を夢中にさせていますが、何が問題なのかはわかりますが、ハイチャートでの最初の時間です..どんな助けでも大歓迎です,ありがとう

4

1 に答える 1

1

xAxisでカテゴリを定義する

 xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        }

シリーズのデータ​​で月のリテラルの代わりに月のインデックス（ベース0）を使用します（サーバーまたはJSのいずれかで簡単に実行できる必要があります）

 series: [{
             name: 'Consommations',
            data: normalizeData([[1,5],[9,10],[5,0]])

        }, {
            name: 'Prévisions',
            data: normalizeData([[1,2],[2,4],[5,8]])

        }]

javascriptを使用してデータを正規化し、欠落している月のデータを追加します

function normalizeData(data){
  var normalizedData=[];
  var i;
  for(i=0;i<12;i++){
    if(data[i])
        normalizedData[i]=data[i];
    else
        normalizedData[i]=0;
  }
  return normalizedData;
}

jsFiddleソリューション：http ：//jsfiddle.net/jugal/zDnS2/

代替ソリューション normalizeDataメソッドに欠落している月のデータを追加する
だけで、可能な月を表す月の配列を作成します

var months=[
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ];

データが存在しない場合は、データを0として追加します

function normalizeData(data){
var existingMonths=[];
var normalizedData=[];
var i;
for(i=0;i<data.length;i++){
    var datum=data[i];
    datum[0]=  $.inArray(datum[0],months);
    existingMonths.push(datum[0]);
    normalizedData.push(datum);
}
for(i=0;i< months.length;i++){
    if($.inArray(i,existingMonths)==-1)
        normalizedData.push([i ,0]);
}
return normalizedData;
}

xAxisカテゴリを月の配列に設定します

 xAxis: {
            categories: months
        }

@ http://jsfiddle.net/jugal/vYK7H/

于 2012-08-16T15:53:06.120 に答える