高图表Javascript与Klipfolio数据集成

Question

我正在努力创建一个Klipfolio甘特图使用高级图表。我能够使用Klipfolio的Html组件创建甘特图，但我在集成数据时遇到了困难。

Klipfolio HTML模板

<div id="container"></div>

<div id="title_text" style="display:none;">
{{each data}}
${$value.title}
{{/each}}
</div>

这将提取我需要的数据，并允许我将其添加到图表脚本中。

Javascript代码-数据

var title = $("#title_text");

此代码将数据添加到类别中。

部分高海图脚本

   $('#container').highcharts({
        chart: {
            type: 'xrange'
        },
        title: {
            text: 'Highcharts X-range study'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: '',
            categories: [$(title).text()],
            min: 0,
            max: 2
        },

但是，结果将所有数据作为一个类别添加。示例

Category 1 []
Category 2 []
Category 3 [data 1, data 2, data 3]

如何提取数据并将其划分为单独的类别？

Category 1 [data 1]
Category 2 [data 2]
Category 3 [data 3]

Answer 1

Klipfolio实际上已经为我们的javascript图表库使用了高级图表，所以您最好的选择是联系支持并请求添加甘特图类型。通过html组件添加库会导致不可预测的结果。

尽管如此，就您的具体问题而言，您将其全部归入一个类别的原因似乎是，$("#title_text")正在包装所有内容，为了解决这个问题，您可以将您的每个都更改为如下所示：

<div id="title_text" style="display:none;">
{{each data}}
   <div id="${$value.title}">${$value.title}</div>
{{/each}}
</div>

然后你们每个人都会有一个独特的身份？