如何在 Wagtail CMS 中使用图表答案

【问题标题】：How to use chart with a Wagtail CMS如何在 Wagtail CMS 中使用图表
【发布时间】：2018-11-06 17:56:30
【问题描述】：

我需要在流场函数中包含自定义图表，您可以找到 with Tauchart。

但是用户如何修改来自 wagtail 管理员的数据？我完全不知道如何做到这一点。

我正在考虑一个表单，但可以将表单添加到流场吗？我想是的，我可以通过指向现有表单的链接来做到这一点。但这似乎很难做到，而且不是一个好主意。

你怎么看？对您来说最佳做法是什么？

您有任何将 Taucharts 集成到 CMS 中的示例吗？

【问题讨论】：

我做过的一个类似项目是 Wagtail Code Block。在其中，我使用一个 HTML 文本区域来保存代码，并创建一个“预览区域”，以显示代码看起来会突出显示的内容。您可以做类似的事情并让它构建图表所需的 JSON。看看：github.com/FlipperPA/wagtailcodeblock
您应该弄清楚您喜欢如何输入数据（文件字段、文本区域、固定输入字段集、动态输入字段集）。只有在您可以将数据存储在 CMS 中之后，您才能想到输出它的方法。 Tauchart 接受 json。

标签： python django charts wagtail wagtail-streamfield

【解决方案1】：

您可以在 blocks.py 中创建一个自定义块，例如 LineChartBlock() 引用名为 line_chart.html 的模板。您需要将自定义块导入到您的 models.py 文件中，以将其添加到您的 StreamField。然后 CMS 管理员端的用户可以输入值并将其保存为参数。然后您可以将其作为动态 JavaScript 变量传递到模板中，您可以使用它来创建自定义图表。这是一个非常粗略的想法......

blocks.py 看起来像这样：

from wagtail.core import blocks

class LineChartBlock(blocks.StructBlock):
    title = blocks.CharBlock()
    x = blocks.DecimalBlock()
    y = blocks.DecimalBlock()
    data = JSONField()

    class Meta:
        template = 'blocks/line_chart.html'

你的models.py：

class BlogPage(Page):
    body = StreamField([
        ('paragraph', RichTextBlock()),
        ('line_chart', LineChartBlock()),
    ])

您的模板：

<script>
    const title = "{{ title }}";
    const x = "{{ x }}";
    const y = "{{ y }}";
    const data = "{{ data }}";

    makeChartWizardry = () => {
       doStuff;
    }

</script>

<section>
    <div id="chart"></div>
</section>

【讨论】：