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

Question

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

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

But the lines or the columns themselves do not display, as seen in the screenshot below.

以下是我为这些图表准备的代码。

型号：

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]})

模板：

<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>

No idea what I'm doing wrong, and it would be great if someone can point me in the right direction.

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

更新 1

调试显示正在加载的数据（见下图），一切似乎都井井有条。仍然不知道为什么不显示这些行。

更新 2

This link 让我找到了问题所在。也许这是 Highcharts 的错误。有人可以建议用 django 解决它的方法吗？

正在添加

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

或

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

或

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

没有解决问题。

Answer 1

"not so delicate" 解决方案 here 终于为我解决了。

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

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

Answer 2

将您的 Highcharts 库版本更新到最新版本。

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

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

Highcharts using Django-Chartit. Chart lines not displayed without window resize, or Inspect Element

python

django

charts

linechart

highcharts