如何更改图例值

通常我很难理解如何构建我馈入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能力。

问候，哈立德

来源

2015-06-29 Khaled Hikmat

在最后一块你的代码，你可以选择的标签是什么：

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

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

来源

2015-06-30 19:25:51 tbarn

非常感谢您的回答！我忘了提及我用标签属性摆弄...但它似乎不工作...我得到相同的结果！ –

好吧....只是尝试@tbarn建议。我现在得到[this]（https://az704007.vo.msecnd.net/images/0ba72836-551d-4f10-bd6d-f708e340c6e2.png） –

好了，我玩了这一点，并得到你想要的，你将不得不完全骑过传递给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”为您的渠道中的步骤。

我希望这能解决问题！

来源

2015-07-06 19:35:50 alex

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

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

来源

2017-08-26 19:15:51 Okko

如何更改图例值

回答

相关问题