如何移除字符串列表首尾双引号？适配Chart.js标签显示

看起来你遇到的核心问题是：后端生成的日期列表JSON字符串，在前端渲染时被额外的双引号包裹，导致Chart.js无法正确识别为数组。而数值列表因为是纯数值类型，渲染时没有这个问题。下面给你几个可行的解决方案：

方案一：后端生成标准JSON，前端安全渲染 #

这是最规范的做法，确保后端输出标准的JSON数组字符串，然后在模板渲染时告诉模板不要转义这个内容。

后端代码优化（确保日期格式正确） #

首先，确保你生成的日期字符串是纯日期格式（不带多余引号），建议用strftime来格式化日期，比直接转str更可控：

import json

event_labels = []
for item in all_list:
    # 格式化日期为YYYY-MM-DD的纯字符串，避免多余格式干扰
    event_date = item.event_created_at.strftime('%Y-%m-%d')
    event_labels.append(event_date)
# 转成标准JSON数组字符串
context['graph_data_labels'] = json.dumps(event_labels)

前端模板渲染（以Jinja2为例） #

在模板中使用safe过滤器，避免模板把JSON字符串转义成带双引号的普通字符串：

<div>{{ graph_data_labels|safe }}</div>

这样输出的结果就是标准的JSON数组：["2018-05-18", "2018-05-17", ...]，Chart.js可以直接使用这个数组作为标签。

方案二：后端传递原始列表，模板转成JS数组 #

如果你不想用json.dumps，可以直接把Python列表传给模板，让模板帮你转成符合要求的JavaScript数组：

后端代码 #

event_labels = []
for item in all_list:
    event_date = item.event_created_at.strftime('%Y-%m-%d')
    event_labels.append(event_date)
context['graph_data_labels'] = event_labels

前端模板渲染 #

用tojson过滤器把每个日期转成标准JSON字符串，再用join拼接成数组：

<div>[{{ graph_data_labels|map('tojson')|join(', ') }}]</div>

输出结果同样是标准的双引号包裹的日期数组，完全符合Chart.js的要求。

方案三：前端兜底处理（不推荐，仅当后端无法修改时使用） #

如果后端代码暂时无法调整，可以在前端用JavaScript去掉首尾的双引号，再解析成数组：

// 获取包含日期字符串的div元素
const labelDiv = document.querySelector('div:nth-of-type(2)');
// 去掉首尾的双引号，再解析成JSON数组
const labels = JSON.parse(labelDiv.textContent.replace(/^"|"$/g, ''));
// 之后就可以把labels传给Chart.js使用了

注意事项 #

• 尽量避免直接用str(item.event_created_at)，如果你的event_created_at是datetime对象，转str可能会附带时间部分，用strftime可以精准控制日期格式。
• 确保后端生成的JSON是标准格式（双引号包裹字符串），这样Chart.js才能无歧义地识别为数组。

内容的提问来源于stack exchange，提问作者Sharpless512