README

概述

该扩展包含两个部分

• 使用 Vue.js 的动态 SVG 图表的代码（有关 Vue.js 组件，请参阅 https://github.com/fiedsch/vuetaocharts。还请务必访问 https://vuejs.ac.cn 并阅读指南）。
• 一个 Contao 内容元素，允许您嵌入图表并提供图表数据。

用法

该扩展提供了一个新的 Contao 内容元素。

• 像往常一样插入到文章中
• 编辑“数据”字段，并以 JSON 格式提供图表数据。示例

{
    "chart_data": [
        {
            "label": "Foo",
            "value": 61.1
        },
        {
            "label": "Bar",
            "value": 18.6
        },
        {
            "label": "Baz",
            "value": 20.3
        }
    ]
}

您可以在 JSON 数据字段中提供任意额外的数据，您可以使用这些数据来扩展图表。

饼图示例

{
    "headline": "The Headline for the Chart",
    "chart_data": [ /* as above */ ]
}

接下来，您像往常一样创建一个新的 Contao 模板（例如，通过克隆 ce_vtcdonut）。请确保，您的模板名称也以 ce_vtc 开头，这样您就可以在内容元素中选择它。

<!-- unchanged parts like surrounding <div> and headline skipped here --> 
    <div id="app<?= $this->appid ?>">
        <div class="chart">
            <h2 v-text="headline"></h2> <!-- ADDED -->
            <vtc-donut
                :data="chartdata"
                :width="chartwidth"
                :height="chartheight"
                :chartrotation="chartrotation"
                @showinfo="showinfo"
            ></vtc-donut>
        </div>
    </div>

    <script>
        var data_from_contao = <?= $this->data; ?>;
        new Vue({
            el: '#app<?= $this->appid ?>',
            data: function () {
                return {
                    selected: 0,
                    chartdata: data_from_contao.chart_data,
                    chartwidth: <?= $this->svgwidth ?>,
                    chartheight: <?= $this->svgheight ?>,
                    chartrotation: 0, // no rotation. first segment starts at 12 o'clock
                    headline: data_from_contao.headline ? data_from_contao.headline : "" // ADDED
                }
            },
            methods: {
                showinfo: function (position) {
                    this.selected = position;
                }
            }
        });
  </script>

</div>

提示

莫斯塔奇语法与 Contao 插入标签

Vue 的莫斯塔奇语法（以及 https://vuejs.ac.cn/v2/guide/syntax.html#Text）和 Contao 的插入标签冲突。例如，请参阅 contao/core#7883

要解决这个问题，请使用

 <div>[{] foo [}]</div>

其中 [{] 和 [}] 将分别由 Contao 替换为 {{ 和 }}，或者

<div v-text="foo"></div>

以避免在 Contao 模板中使用双大括号。