Question

我刚刚开始使用Python / Django，并尝试使用Chartit库创建一些图表。

我已按照说明here设置了包含简单线条和柱形图的项目。当我将鼠标悬停在图表上时，我可以看到这些值。

但是线条或列本身不会显示，如下面的屏幕截图所示。

以下是我为这些图表制作的代码。

MODEL：

class MonthlyWeatherByCity(models.Model):
    def __str__(self):
        return str(self.month) + "(H: " + str(self.houston_temp) + ", B: " + 
str(self.boston_temp) + ")"

    month = models.IntegerField()
    boston_temp = models.DecimalField(max_digits=5, decimal_places=1)
    houston_temp = models.DecimalField(max_digits=5, decimal_places=1)

查看：

def weather_chart_view(request):
    #Step 1: Create a DataPool with the data we want to retrieve.
    weatherdata = \
        DataPool(
           series=
            [{'options': {
               'source': MonthlyWeatherByCity.objects.all()},
              'terms': [
                'month',
                'houston_temp',
                'boston_temp']}
             ])

    #Step 2: Create the Chart object
    lcht = Chart(
            datasource = weatherdata,
            series_options =
              [{'options':{
                  'type': 'line',
                  'stacking': False},
                'terms':{
                  'month': [
                    'boston_temp',
                    'houston_temp']
                  }}],
            chart_options =
              {'title': {
                   'text': 'Weather Data of Boston and Houston'},
                'xAxis': {
                    'title': {
                       'text': 'Month'}},
                'yAxis': {
                  'title': {
                      'text': 'Temperature'}}
              })

    pcht = Chart(
            datasource = weatherdata,
            series_options =
              [{'options':{
                  'type': 'pie',
                  'stacking': False},
                'terms':{
                  'month': [
                    'boston_temp',
                    'houston_temp']
                  }}],
            chart_options =
              {'title': {
                   'text': 'Weather Data of Boston and Houston'},
                'xAxis': {
                    'title': {
                       'text': 'Month'}},
                'yAxis': {
                  'title': {
                      'text': 'Temperature'}}
              })    
    #Step 3: Send the chart object to the template.
    return render_to_response('polls/template.html', {'weatherCharts': [lcht, pcht]})

TEMPLATE：

<head>
    <meta charset="UTF-8">
    <title>Results: Question {{ question.id }}</title>

    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type ="text/javascript" src ="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/static/js/highcharts.js"></script>

    {% load chartit %}
    {{ weatherCharts|load_charts:"lcht, pcht" }}
</head>
<body>
<div id='lcht'> Chart will be rendered here </div>
<div id='pcht'> Chart will be rendered here </div>
</body>
</html>

不知道我做错了什么，如果有人能指出我正确的方向，那就太棒了。

P.S。我对网络开发不是很有经验，还在学习：）

更新1

调试显示正在加载的数据（参见下图），一切似乎都是有序的。仍然不知道为什么线条没有显示。

更新2

This链接让我指出了这个问题。也许这是Highcharts的一个错误。任何人都可以建议用django来解决它吗？

添加

<script>
    $(window).resize();
</script>

或

<script>
    document.getElementById('lcht').style.width = "100%";
</script>

或

<script> 
    $('#lcht').resize(); 
</script>

无法解决问题。

Answer 1

将Highcharts库版本更新为最新版本。

当前版本： http://code.highcharts.com/

Answer 2

“不那么精致”的解决方案here，终于为我解决了这个问题。

我在模板中添加了以下内容：

<script>
    setTimeout(function() {$(window).resize();}, 0);
</script>

使用Django-Chartit的Highcharts。没有窗口调整大小或检查元素时不显示图表行

2 个答案: