Question

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

Answer 1

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

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

在十月应用根目录中查看此文件：{% 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>

（编辑：有一些＆＃34;脏＆＃34;这里需要调整：我添加了一个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。

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

1 个答案: