来自 django 模型的数据未传递到 highcharts 图表

Question

我一直在尝试遵循这种方法here 尝试将数据从 django 模型传递到 highcharts 图表。但是，它似乎没有传递任何数据，即使我的数据库中确实有适用的数据。以下是相关代码：

views.py：

def master(request):

    class ChartData(object):    
        def check_usage_data():
            data = {'usage': []}

            sources = RealTimeData.objects.all()

            for source in sources:
                data['usage'].append(source.usage)

            return data

    if request.user.is_authenticated():

        data = ChartData.check_usage_data()

        series = [
            {"data": data['usage']}
        ]

        return render(request, 'Properties/master.html', {'series': series})

    else:

        # If the usre isn't authenticated, the user is redirected to the Sign-n Page

        return render(request, 'SignIn/SignInPage.html')

master.html：

<!-- Chart builders -->
<script type="text/javascript">

    var RealTimeSeries = {{ series|safe }}

    // hours setting //
    hoursX = ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']

    // categories/dates setting //
    oneYearX = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'],
    sixMonthX = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']
    threeMonthX = ['Jan', 'Feb', 'Mar']

    // usage data sets //
    usageoneYearY = [9164950.4, 8154238.9, 3387452.8, 8849677.6, 9957030.6, 10740101.9, 9196562.5, 10532428.8, 10017343.7, 10190627.7, 9454554.3, 7832326.9]
    usagesixMonthY = [9196562.5, 10532428.8, 10017343.7, 10190627.7, 9454554.3, 7832326.9]
    usagethreeMonthY = [10190627.7, 9454554.3, 7832326.9]

    // rates data sets //
    oldRateoneYearY = [6.87, 10.62, 11.95, 10.65, 11.5, 12.74, 10.21, 11.16, 8.39, 8.78, 9.84, 9.81]
    oldRatesixMonthY = [10.21, 11.16, 8.39, 8.78, 9.84, 9.81]
    oldRatethreeMonthY = [8.39, 8.78, 9.84, 9.81]

    newRateoneYearY = [6.7087804, 8.452008, 6.2561854, 8.7319573, 6.2172567, 7.5617114, 10.1019943, 8.7198434, 8.1792204, 7.8935053, 6.1292755, 7.2133497]
    newRatesixMonthY = [10.1019943, 8.7198434, 8.1792204, 7.8935053, 6.1292755, 7.2133497]
    newRatethreeMonthY = [7.8935053, 6.1292755, 7.2133497]

    // costs data sets //
    costoneYearY = [614856.3935, 689196.9252, 211925.3278, 772750.0735, 619054.1545, 812135.5149, 929036.219, 918411.3026, 819340.6198, 804397.7345, 579495.6824, 564973.1276]
    costsixMonthY = [929036.219, 918411.3026, 819340.6198, 804397.7345, 579495.6824, 564973.1276]
    costthreeMonthY = [804397.7345, 579495.6824, 564973.1276]

    // savings data sets //
    savingsoneYearY = [14775.69899, 176783.2459, 192875.2818, 169740.5909, 526004.3645, 556153.4672, 9932.812293, 257007.7515, 21114.51661, 90339.37761, 350832.4608, 203378.1413]
    savingssixMonthY = [9932.812293, 257007.7515, 21114.51661, 90339.37761, 350832.4608, 203378.1413]
    savingsthreeMonthY = [90339.37761, 350832.4608, 203378.1413]

    $(document).ready(function(){
        // Construct RealTime chart //
        var usageChart = Highcharts.chart('realTime-chart', {
            chart: {
                type: 'column',
                style: {
                    fontFamily: 'Gotham-Book'
                }
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: hoursX
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Usage (kWh)'
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Master',
                data: RealTimeSeries,
                color: 'rgb(33,93,125)',
            }],
            credits: {
                enabled: false,
            }
        });
    });
</script>

现在，页面无法加载，因为我收到“必须使用 ChartData 实例作为第一个参数调用未绑定方法 check_usage_data()（什么都没有）”错误。但是，我之前玩过 ChartData(object) 类定义的位置，当我加载页面时，图表的布局会显示，但上面不会有任何数据（轴标题一切都会在那里）。有人知道我如何遵循链接方法有什么问题吗？

Answer 1

这里的问题可能是 highcharts 不理解您传递给它的数据的结构。

首先，您需要解决check_usage_data() 的问题。似乎没有理由将此方法必须在其自己的类中，因此我会将其移至您的 views.py 模块中的顶级函数。

def check_usage_data():
    data = {'usage': []}
    sources = RealTimeData.objects.all()

    for source in sources:
        data['usage'].append(source.usage)

    return data

然后从视图中调用它：

def master(request):

   if request.user.is_authenticated():
       data = check_usage_data()

假设您的数据是浮点数列表，您应该将其传递给您的模板：

return render(request, 'Properties/master.html', {'series': data['usage']})

所以在完成所有views.py 之后的样子：

def master(request):

    if request.user.is_authenticated():
        data = check_usage_data()
        return render(request, 'Properties/master.html', {'series': data['usage']})

    return render(request, 'SignIn/SignInPage.html')

def check_usage_data():
    data = {'usage': []}
    sources = RealTimeData.objects.all()

    for source in sources:
        data['usage'].append(source.usage)

    return data  

还值得在数据列表输出到模板的位置添加分号：

var RealTimeSeries = {{ series|safe }};