如何在十月 CMS 中添加折线图？

Question

我想在十月 CMS 的一个小部件页面中添加折线图作为控制图。 CMS 具有条形图和饼图的预建类。我想知道他们是否对其他类型的分析数据有类似的类。 我想将折线图预建类添加到 html 部分页面，可以用作 october cms 中的小部件。

Answer 1

您似乎在谈论这样的事情：https://octobercms.com/docs/ui/chart，并且您正在寻找除了那里提到的图表之外的另一种类型的图表。

我想说如果那里没有列出这样的东西，那么它可能不存在。但是...嘿...我只是查看了后端 UI JS 代码。

在您的 10 月应用根目录中查看此文件：{% app root %}/modules/system/assets/ui/js/chart.line.js

/*
 * Line Chart Plugin
 *
 * Data attributes:
 * - data-control="chart-line" - enables the line chart plugin
 * - data-reset-zoom-link="#reset-zoom" - specifies a link to reset zoom
 * - data-zoomable - indicates that the chart is zoomable
 * - data-time-mode="weeks" - if the "weeks" value is specified and the xaxis mo
de is "time", the X axis labels will be displayed as week end dates.
 * - data-chart-options="xaxis: {mode: 'time'}" - specifies the Flot configurati
on in JSON format. See https://github.com/flot/flot/blob/master/API.md for detai
ls.
 *
 * Data sets are defined with the SPAN elements inside the chart element: <span 
data-chart="dataset" data-set-data="[0,0],[1,19]">
 * Data set elements could contain data attributes with names in the format "dat
a-set-color". The names for the data set
 * attributes are described in the Flot documentation: https://github.com/flot/f
lot/blob/master/API.md#data-format
 *
 * JavaScript API:
 * $('.chart').chartLine({ resetZoomLink:'#reset-zoom' })
 *

所以功能似乎在那里，但它不在公共文档中。看起来你可以试试这样的东西

<div
    class="control-chart"
    data-control="chart-line"
    style="min-height:400px"
    data-zoomable="1"
    data-reset-zoom-link="#reset-zoom"
    data->
    <span data-chart="dataset" data-set-label="Graph me tender" data-set-data="[0,0],[1,5],[3,8],[4,2],[5,6]">
         Graph me tender
    </span>
    <span data-chart="dataset" data-set-label="Graph me sweet" data-set-data="[0,0],[1,5],[3,8],[4,2]">
        Graph me sweet
    </span>
</div>
<a id="#reset-zoom" href="#">Reset zoom</a>

（编辑：这里需要进行一些“肮脏”的调整：我添加了一个 min-height css 属性，否则会引发错误。也许应该有一些额外的类来代替我不知道的。另外，这两个数据集没有按顺序绘制（第二个先绘制）并且在图例中被错误标记，并且看起来彼此水平连接。缩放功能似乎不起作用等等等等。我认为这个线图可能仍在进行中，这可能是它尚未包含在文档中的原因。）

，玩弄它，看看它做了什么。 （我没有对此进行测试，希望它能以某种方式工作。）如果我理解正确，它应该给你一个带有数据点[0,0],[1,5],[3,8],[4,2],[5,6]（x，y 坐标点）的可缩放折线图，下面的链接应该重置缩放（编辑：缩放不起作用。可能需要为此设置一些额外的选项）

整个事情似乎是基于这个Flot JQuery 图表库。因此，除了阅读 10 月的 {% app root %}/modules/system/assets/ui/js/chart.line.js 源代码之外，您还可以在那里或 here 找到一些很好的进一步提示。