如何使用 Django 渲染 highcharts solidgauge？

Question

我想显示一个 highcharts solidgauge (https://www.highcharts.com/demo/gauge-solid)。对于我的小应用程序，我使用 Django 和 Python3.8。但我发现的大多数示例仅适用于 Angular。

tldr：我从 highcharts（第 17 号）收到一条红色错误消息，指出请求的系列类型不存在。

长话短说：因为我不知道有什么更好的方法，所以我下载了四个 js 文件（https://code.highcharts.com/modules/solid-gauge.js、https://code.highcharts.com/modules/solid-gauge.src.js、https://code.highcharts.com/highcharts-more.js 和 https://code.highcharts.com/highcharts-more.src.js）。我将它们放在我的 Django 的静态文件夹中并运行 manage.py collectstatic。

在我的views.py 中，我只是尝试复制highcharts 页面中的示例，但我没有得到它来呈现。代码如下所示。

def landingpage(request):        
   chart = {
       'chart': {
           'type':'solidgauge',
       },
       'title': {'text':'Example gauge'},
       'pane': {
           'center': ['50%', '85%'], 'size': '140%', 'startangle': -90, 'endangle':90, 'background': {
               'backgroundcolor': 'Highcharts.defaultOptions.legend.backgroundColor || \'#EE\'', 'innerRadius': '60%', 'outerRadius': '100%', 'shape': 'arc',
           }
       },
       'exporting': {'enabled': False},
       'tooltip': {'enabled': True},
       'yAxis':{'stops': [
               [0.1, '#55BF3B'], # green
               [0.5, '#DDDF0D'], # yellow
               [0.9, '#DF5353'], # red
           ], 'min':0, 'max':200, 'lineWidth': 0, 'tickWidth': 0, 'minorTickInterval': 'null', 'tickAmount': 2, 'title': {
               'y':-70,
               'text': 'Speed'
           }, 'labels': {
               'y':16
           }
       },
       'credits': {
           'enabled': False
       },
       'plotOptions': {
           'solidgauge': {
               'dataLabels': {
                   'useHTML': True,
                   'borderWidth': 0,
                   'y':6,
               }
           }
       },
       'series': [{
           'name': 'Speed', 'data': [80], 'dataLabels': {
               'format': '<div style="text-align:center"><span style="font-size:25px">{y}</span><br/><span style="font-size:12px;opacity:0.4">km/h</span></div>'
           }, 'tooltip': {
               'valueSuffix': ' km/h'
           }
       }]
   }
dump = json.dumps(chart, cls=CustomJsonEncoder)             
gauge = {'chart':dump}
context['chart_example'] = gauge['chart']
return render(request, templ_folder_name + 'landingpage.html', context)

class CustomJsonEncoder(json.JSONEncoder):
   def default(self, obj):
       if isinstance(obj, Decimal):
           return float(obj)
       return super(CustomJsonEncoder, self).default(obj)

在我的模板中我使用这个：

{% block content %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="page-header">Dashboard</h2>
        <br>
        <div class="container-fluid">
            <div class="col-sm-6 col-sm-offset-0 col-md-7 col-md-offset-0">
                <div id="hccontainer"></div>
                    <br>
            </div>
            <div class="col-sm-3 col-sm-offset-0 col-md-4 col-md-offset-0">
                TBD
            </div>
        </div>
        <br>
        </div>
    {% load static %}
        <script type="text/javascript" src="{% static 'highcharts/highcharts.src.js' %}"></script>
        <script type="text/javascript" src="{% static 'highcharts/debugger.js' %}"></script>
        <script type="text/javascript" src="{% static 'highcharts/highcharts-more.js' %}"></script>
        <script type="text/javascript" src="{% static 'highcharts/highcharts-more.src.js' %}"></script>
        <script type="text/javascript" src="{% static 'highcharts/solid-gauge.js' %}"></script>
        <script type="text/javascript" src="{% static 'highcharts/solid-gauge.src.js' %}"></script>
<script>
        Highcharts.chart('hccontainer', {{chart_example|safe}});

        </script>

{% endblock %}

你能告诉我我的错误在哪里吗？

更新： 实际上我不知道如何在我的 FF 中使用开发人员工具，但我从它提到的内容中得到了一个截图。

Answer 1

至少部分我找到了解决方案，但老实说我并不完全理解它。我尝试了几种包含的组合，其中一种似乎有效（尚待详细测试！）是这样的：

 <script type="text/javascript" src="{% static 'highcharts/highcharts.src.js' %}"></script>
 <script type="text/javascript" src="{% static 'highcharts/modules/bullet.src.js' %}"></script>
    <script type="text/javascript" src="{% static 'highcharts/highcharts-more.js' %}"></script>
    <script>
        Highcharts.chart('hccontainer_chart1', {{var1|safe}});
        </script>
    <script>
        Highcharts.chart('hccontainer_chart2', {{chart2|safe}});
    </script>
    <script type="text/javascript" src="{% static 'highcharts/modules/solid-gauge.js' %}"></script>
    <script>
        Highcharts.chart('hccontainer_chart3', {{chart3|safe}});
    </script>

我仍然感到困惑，因为它必须完全是这个顺序。首先，我想按这个顺序 highcharts -> highcharts-more -> bullet -> solidgauge。此外，我认为如果我使用 .js 或 .src.js 并没有什么区别，但出于某种原因它确实如此。也许有经验的人可以向我解释一下，这样我以后就不会再犯同样的错误了。

谢谢！

Answer 2

我认为它可能会解决您的考虑 - highcharts solidgauge 模块必须在 highcharts-more 模块之后初始化，因为某些属性是从 more 模块继承的。你可以在这个演示中测试它：https://jsfiddle.net/BlackLabel/gqLhm3cr/