如何更改圖例值

通常我很難理解如何構建我饋入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

如何更改圖例值

回答

相關問題