Question

我正在使用Django 1.10.3和python 3.4.2 出于某种原因，图表不会在我的图表图表上显示图表线。但是，我可以看到数据＆＃39;当我在浏览器中查看源代码时。请指出我错在哪里。

我的图表（没有图表）

以下是view-source显示的内容

<head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
</head>
<div id='cont'><script type="text/javascript">
var _chartit_hco_array = [{"yAxis": [{"title": {"text": "Temp"}}], "series": [{"stacking": false, "data": ["20.83", "20.83", "21.61", "22.11", "23.00", "23.17", "23.94", "24.67", "24.94", "24.94", "25.00", "25.00"], "type": "line", "name": "temperature"}], "xAxis": [{"categories": ["2016-12-16T11:40:13+00:00", "2016-12-16T11:40:13+00:00", "2016-12-16T12:00:32+00:00", "2016-12-16T12:20:51+00:00", "2016-12-16T13:20:56+00:00", "2016-12-16T13:40:22+00:00", "2016-12-16T14:00:41+00:00", "2016-12-16T14:21:00+00:00", "2016-12-16T14:40:26+00:00", "2016-12-16T14:47:29+00:00", "2016-12-16T14:51:02+00:00", "2016-12-16T14:54:34+00:00"], "title": {"text": "Date"}}], "chart": {"renderTo": "cont"}, "title": {"text": "Temp Data of Kedsum"}}];
</script>
<script src="/static/chartit/js/chartloader.js" type="text/javascript">
</script></div>

views.py

from chartit import DataPool, Chart
from django.shortcuts import render
from monitor.models import LogicLocation, SensorPrologue, SensorThgr122N, SensorKedsum

#def graphs(request):
#  return render(request, 'graphs/graphs.html', {'content': ['Graphs Output!!!']})

def graphs(request):
    #Step 1: Create a DataPool with the data we want to retrieve.
    sensordata = DataPool(
           series=
            [{'options': {
               'source': SensorKedsum.objects.all()},
              'terms': [
               'date',
                'temperature']}
             ])

    #Step 2: Create the Chart object
    cht = Chart(
            datasource = sensordata,
            series_options =
              [{'options':{
                  'type': 'line',
                  'stacking': False},
                'terms':{
                  'date': [
                     'temperature']
                  }}],
            chart_options =
              {'title': {
                   'text': 'Temp Data of Kedsum'},
               'xAxis': {
                    'title': {
                       'text': 'Date'}},
               'yAxis': {
                'title': {
                   'text': 'Temp',
                }}})

    #Step 3: Send the chart object to the template.
    return render(request, 'graphs/graphs.html', {'tempchart': cht})

graphs.html

<head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
</head>
{% load chartit %}

{% block content %}
            <div id='cont'>{{ tempchart|load_charts:"cont" }}</div>
{% endblock %}

这是控制台输出

Performing system checks...

System check identified no issues (0 silenced).
January 11, 2017 - 20:18:27
Django version 1.10.3, using settings 'smarthome.settings'
Starting development server at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
[11/Jan/2017 20:18:29] "GET /graphs/ HTTP/1.1" 200 1128
[11/Jan/2017 20:18:30] "GET /static/chartit/js/chartloader.js HTTP/1.1" 304 0

Answer 1

@Vams，我看到您使用的是最新版本的HighCharts.js，这可能无法正常工作。使用Django-Chartit需要以下JavaScript库。

jQuery - 已知版本1.6.4和1.7与django-chartit配合良好。
Highcharts - 已知版本2.1.7和2.2.0与django-chartit配合良好。

尝试其中一个旧版本，看看它是否有效。如果确实如此，那意味着新版本的HighCharts.js与旧版本不兼容。即使旧版本无法正常工作，也意味着您的代码中存在问题。我需要打开一个bug来进一步调试。

- 亚历克斯，django-chartit的维护者

Answer 2

问题在于模型字段类型。在我的例子中它是VARCHAR但它必须是DECIMAL或INTEGER

谢谢！

Django Chartit不显示yAxis数据

2 个答案: