如何使用自定義的x軸在同一張圖中繪制多個時間序列

Question

我想使用相同的xaxis巫婆（自定義的一個）在同一張圖中繪制多個時間序列。 這是我的代碼：在views.py中，這是我的功能：

def cdr_weekly_comparison(request):
    #import ipdb; ipdb.set_trace()
    acc = cdr_data.find()
    donnees=[]
    dt = datetime.now()
    y = dt.year
    m = dt.month
    d = dt.day
    for k in range(7):
        m = dt.month
        data=[]
        liste=[]
        liste_time=[]
        for i in acc:
            try:
                if (i['start_uepoch'].year==y and i['start_uepoch'].month== m and i['start_uepoch'].day==d-k):
                    liste.append([i['start_uepoch'],i['duration']])
            except:
                pass
        for q in range(24):
            for mnt in range(60):
                liste2=[]
                ACD=0
                somme_duration=0
                n=0
                for p in liste:
                    if (p[0].hour==q and p[0].minute == mnt):
                        liste2.append(p[1])
                        temps=p[0]
                if len(liste2)!=0:
                    for j in liste2:
                        somme_duration+=j
                        n+=1
                    ACD=round((float(somme_duration)/n)*100)/100
                    liste_time.append(calendar.timegm(temps.timetuple()))
                    data.append(ACD)
                else:
                    st=time.strftime("%H:%M:%S", time.gmtime(q*3600+mnt*60))
                    patern="%H:%M:%S"
                    time_now=datetime.strptime(st, patern)
                    time_now=time_now.replace(year=y, month=m, day=d-k)
                    liste_time.append(calendar.timegm(time_now.timetuple()))
                    data.append(0)
        donnees.append(data)

    MesVars={
    "d1": donnees[0],
    "d2": donnees[1],
    "d3": donnees[2],
    "d4": donnees[3],
    "d5": donnees[4],
    "d6": donnees[5],
    "d7": donnees[6],
    "tense": liste_time,
    }
    return render(request,"frontend/cdr_weekly_comparison.html",MesVars)

在cdr_weekly_comparison.html中，我有這個

{% extends "frontend/master.html" %}
{% load i18n cdr_extras country_dialcode_tags common_tags %}
{% load cache %}
{% block extra_head %}
  <script type="text/javascript">
  $(document).ready(function() {
    $("#accordion").accordion({ autoHeight: false,  clearStyle: true  });
  });
  </script>

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>
 var d1={{d1}};
 var d2={{d2}};
 var d3={{d3}};
 var d4={{d4}};
 var d5={{d5}};
 var d6={{d6}};
 var d7={{d7}};
 var liste_time={{tense}};
</script>
{% endblock %}

{% block content %}
<script id="source" language="javascript">
   (function selectOne() {
      var dataF={{num|safe}};
      var select = document.getElementById('mySelect');
          df = document.createDocumentFragment();
      for (var i=0; i<=dataF.length; i++) {
         var option = document.createElement('option');
         option.value = dataF[i];
         option.appendChild(document.createTextNode(dataF[i]));
         df.appendChild(option);
               }
      select.appendChild(df);
    }());
</script>

<script id="source" language="javascript" type="text/javascript">
$(function () {
    $('#container').highcharts({
        title: {
            text: 'weekly comparison',
            x: -20 //center
        },
        subtitle: {
            text: null,
            x: -20
        },
        xAxis: {
            data : liste_time
        },
        yAxis: {
            title: {
                text: 'Average Call Duration'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
   //     tooltip: {
   //         valueSuffix: '°C'
   //     },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: ((new Date()).getDate()) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d1
         }, {
            name: ((new Date()).getDate()-1) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d2

        }, {
            name: ((new Date()).getDate()-2) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d3
        }, {
              name: ((new Date()).getDate()-3) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d4
        }, {
           name: ((new Date()).getDate()-4) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d5
        }, {
           name: ((new Date()).getDate()-5) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d6
        }, {
            name: ((new Date()).getDate()-6) + "-" + ((new Date()).getMonth()+1) + "-" +(new Date()).getFullYear(),
            data: d7

         }]
    });
});
</script>
{% endblock %}

不幸的是，這些代碼並沒有給我我想要的結果：只有最后一天的數據顯示了，而xaxis卻沒有一步一步地顯示我從00:00到23:00的時間。

想要的結果是每行7個時間序列表示一天的時間序列，因此d1，d2，d3，d4，d5，d6，d7依次是每天的數據，並且liste_time是我要顯示的時間xaxis。

Answer 1

對於datetime類型x軸上的pointStart和pointInterval屬性，這是一個很好的情況。

例：

• http://jsfiddle.net/jlbriggs/92gkjwo3/

您可以正確使用軸標簽formatter功能和tickInterval來定義標簽的位置和格式。

參考文獻：

• http://api.highcharts.com/highcharts#xAxis.labels.formatter

• http://api.highcharts.com/highcharts#plotOptions.series.pointInterval

• http://api.highcharts.com/highcharts#plotOptions.series.pointStart