如何更改图例值

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();

});

输出如下所示：

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

问候， 哈立德

Answer 1

在最后一段代码中，您可以选择标签是什么：

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

我来自：https://github.com/keen/keen-js/blob/master/docs/visualization.md#funnels

Answer 2

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

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

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

关键组件是这样的：

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

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

希望这能解决问题！

Answer 3

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

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