散景折线图不显示线条

Question

我正在尝试创建一个应用程序，该应用程序将根据所选项目显示一些图表以获取平均每月数据，例如“6/2023”、“7/2023”。我的代码正在运行，我可以在终端中看到输出，但是折线图不起作用，只是一个空白页面，而且看起来它没有接收我的数据。请帮忙

class Item(models.Model):
    item = models.CharField(max_length=100)
    date = models.DateField(null=True)
    price = models.FloatField()

    def __str__(self):
        return self.item

def line(request):
    items = Item.objects.values_list('item', flat=True).distinct()
    item = request.GET.get('item', 'Drink')
    data = Item.objects.filter(item=item).annotate(
        month=F('date__month'),
        year=F('date__year')
    ).values(
        'month',
        'year'
    ).annotate(
        avg_price=Avg('price')
    ).order_by(
        'year',
        'month'
    )

    item_years = [f"{k['month']}/{k['year']}" for k in data]
    item_price = [f"{v['avg_price']}" for v in data]

    cds = ColumnDataSource(data=dict(item_years=item_years, item_price=item_price))
    fig = figure(height=500, sizing_mode="stretch_width", title=f"{item} GDP")
    fig.title.align = 'center'
    fig.title.text_font_size = '1.5em'
    fig.yaxis[0].formatter = NumeralTickFormatter(format="$0.0a")

    fig.circle(source=cds, x='item_years', y='item_price', size=12)
    fig.line(source=cds, x='item_years', y='item_price', line_width=2)

    tooltips = [
        ('Year', '@item_years'),
        ('Price', '@item_price')
    ]
    fig.add_tools(HoverTool(tooltips=tooltips))

    script, div = components(fig)
    context = {
        'items': items,
        'item': item,
        'script': script,
        'div': div,
    }

    if request.htmx:
        return render(request, 'analysis/partials/gdp-bar.html', context)

    return render(request, 'analysis/line.html', context)

<div class="row">
        <div id="linechart" class="col-10">
            {% include 'analysis/partials/gdp-bar.html' %}
        </div>
        <div class="col-2">
                <label>Product</label>
                <select id="select-year"
                        class="custom-select"
                        name="item"
                        autocomplete="off"
                        hx-get="{% url 'linechart' %}"
                        hx-target="#linechart">

                    {% for c in items %}
                        <option value="{{c}}"
                        {% if item == c %} selected {% endif %}>{{c}}</option>
                    {% endfor %}
                </select>

我尝试以折线图显示数据，如果我仅使用年份或月份数据，但不能同时使用月份和年份，则它会起作用。

Answer 1

如果我是你，我会为每个数据数组返回JSON格式的数据，并使用chart.js（最新版本）。