Question

一般来说，我很难理解如何构建我提供给parseRawData的数据项。但在这里我遇到了一个更简单的问题......我无法更改图表图例。我创建了这个可视化：

    var appRetentionAndroidFunnelQry = new Keen.Query("funnel", {
    steps: [
        {
            event_collection: "devices",
            actor_property: "activationCode",
            filters: [
                {
                    "property_name": "action",
                    "operator": "eq",
                    "property_value": "Create"
                },
                {
                    "property_name": "platform",
                    "operator": "eq",
                    "property_value": "android"
                }
            ],
            timeframe: {
                "start": periodRefStart.toISOString(),
                "end": periodRefEnd.toISOString()
            }
        },
        {
            event_collection: "devices",
            actor_property: "activationCode",
            filters: [
                {
                    "property_name": "action",
                    "operator": "eq",
                    "property_value": "Update"
                },
                {
                    "property_name": "platform",
                    "operator": "eq",
                    "property_value": "android"
                }
            ],
            timeframe: {
                "start": period1Start.toISOString(),
                "end": period1End.toISOString()
            }
        },
        {
            event_collection: "devices",
            actor_property: "activationCode",
            filters: [
                {
                    "property_name": "action",
                    "operator": "eq",
                    "property_value": "Update"
                },
                {
                    "property_name": "platform",
                    "operator": "eq",
                    "property_value": "android"
                }
            ],
            timeframe: {
                "start": period2Start.toISOString(),
                "end": period2End.toISOString()
            }
        }
    ]
});

var appRetentionIosFunnelQry = new Keen.Query("funnel", {
    steps: [
        {
            event_collection: "devices",
            actor_property: "activationCode",
            filters: [
                {
                    "property_name": "action",
                    "operator": "eq",
                    "property_value": "Create"
                },
                {
                    "property_name": "platform",
                    "operator": "eq",
                    "property_value": "ios"
                }
            ],
            timeframe: {
                "start": periodRefStart.toISOString(),
                "end": periodRefEnd.toISOString()
            }
        },
        {
            event_collection: "devices",
            actor_property: "activationCode",
            filters: [
                {
                    "property_name": "action",
                    "operator": "eq",
                    "property_value": "Update"
                },
                {
                    "property_name": "platform",
                    "operator": "eq",
                    "property_value": "ios"
                }
            ],
            timeframe: {
                "start": period1Start.toISOString(),
                "end": period1End.toISOString()
            }
        },
        {
            event_collection: "devices",
            actor_property: "activationCode",
            filters: [
                {
                    "property_name": "action",
                    "operator": "eq",
                    "property_value": "Update"
                },
                {
                    "property_name": "platform",
                    "operator": "eq",
                    "property_value": "ios"
                }
            ],
            timeframe: {
                "start": period2Start.toISOString(),
                "end": period2End.toISOString()
            }
        }
    ]
});

var steps = [
    periodRefStart.toISOString().slice(0, 10) + ' - ' + periodRefEnd.toISOString().slice(0, 10),
    period1Start.toISOString().slice(0, 10) + ' - ' + period1End.toISOString().slice(0, 10),
    period2Start.toISOString().slice(0, 10) + ' - ' + period2End.toISOString().slice(0, 10)
];

var combinedFunnel = new Keen.Dataviz()
    .el(document.getElementById('app-retention-chart'))
    .chartType('columnchart')
    .chartOptions({
        orientation: 'horizontal'
    })
    .height(250)
    .prepare(); // start spinner

client.run([appRetentionAndroidFunnelQry, appRetentionIosFunnelQry], function (err, response) {
    var output = {
        result: [],
        steps: []
    };

    // Combine results
    Keen.utils.each(response[0].result, function (stepResult, i) {
        output.result.push([
            steps[i],
            response[0].result[i],
            response[1].result[i]
        ]);
    });

    // Draw custom data object
    combinedFunnel
      .parseRawData(output)
      .render();

});

输出如下： enter image description here

我如何更改图例和列标签来说明Android和iOS而不是1和2？此外...任何有助于更好地理解数据解析器如何工作的帮助将不胜感激。我尝试阅读parseRawData.js源代码，但它似乎超出了我不那么强大的JavaScript能力。

此致哈立德

Answer 1

好的，所以我玩了一下这个，为了得到你想要的东西，你将不得不完全超越传递给Dataviz组件的数据集。

以下是一个示例jsfiddle，它向您显示数据的格式，以获取您正在寻找的内容：

http://jsfiddle.net/hex337/16av86as/2/

关键部分是：

.call(function () {
    this.dataset.output([
        ["index", "iOS", "Android"],
        ["r1",    1000,  900],
        ["r2",     750,  700]
    ]);
})

您不想对数字进行硬编码，而是希望使用您运行的查询的结果，但这应该会为您提供＆＃34; iOS＆＃34;和＆＃34; Android＆＃34;图例键，你可以设置＆＃34; r1＆＃34;和＆＃34; r2＆＃34;成为漏斗中的步骤。

我希望这能解决问题！

Answer 2

In the very last piece of your code, you can choose what the labels are:

// Draw custom data object
combinedFunnel
      .parseRawData(output)
      .labels(["Android", "iOS"])
      .render();

I got this from: https://github.com/keen/keen-js/blob/master/docs/visualization.md#funnels

Answer 3

您可以使用.labelMapping（）函数。特别是当对数据使用分组时，数据中标签的顺序可能会发生变化，因此.labelMapping（）比仅使用.labels（）设置标签更安全。

chart.data(res).labelMapping({
  '741224f021ca7f': 'Sensor A',
  'a1a9e6253e16af': 'Sensor B'
}).render();

如何更改图例值

3 个答案: