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

【问题标题】：Highcharts using Django-Chartit. Chart lines not displayed without window resize, or Inspect Element使用 Django-Chartit 的 Highcharts。不调整窗口大小或检查元素时不显示图表线
【发布时间】：2017-04-13 12:45:44
【问题描述】：

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

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

但行或列本身不显示，如下面的屏幕截图所示。

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

型号：

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>

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

附：我对网络开发不是很有经验，还在学习:)

更新 1

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

更新 2

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

添加

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

或

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

或

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

不能解决问题。

【问题讨论】：

我不认为这是 Higcharts 中的错误。使用了什么版本的 Highcharts？你能用简单的 JavaScript 例子重现错误吗？您是否有必要在 Highcharts 库之上使用另一层抽象？它给你带来什么好处？
Highcharts JS v2.1.7 (2011-10-19) 我没有用一个简单的 JS 示例进行尝试，但是有相同问题的线程。包装器使我能够在 Django 模板中使用它，而不是编写 JavaScript。
Highcharts 版本太老了，不支持，可以更新到 4.XX / 5.XX 吗？
不错！这使它在没有黑客的情况下工作！非常感谢。不知道我是如何获得旧版本的，我很确定我是从 Highcharts 网站下载的。您能否将其发布为我可以接受的答案？
是的，已发布，很高兴它有所帮助。

标签： python django charts highcharts linechart

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

“不那么微妙”的解决方案here，终于为我解决了。

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

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

【讨论】：