格式化通過Keen生成的Google柱狀圖的工具提示內容

我們在網站上使用Keen來跟蹤查看數據。這很好，但我有一個問題，就是如何在圖表中顯示一些數據（使用JS SDK的v3.0.5）。在用戶儀表板上，我們有一個顯示最近4個月數據的圖表（時間表：this_4_months）。我有一個查詢，但 -格式化通過Keen生成的Google柱狀圖的工具提示內容

當用戶在其中一列懸停時，您會看到工具提示中的詳細信息，例如，「2015年4月1日12:00:00 AM」 - 有什麼方法可以將此工具提示設置爲更加用戶友好的方式嗎？例如「2015年4月」

Keen.ready(function() { 

     var query = new Keen.Query('count', { 
      'eventCollection' : 'profile_views', 
      'timeframe' : 'this_4_months', 
      'interval' : 'monthly', 
      'groupBy' : 'view.membership_type', 
      'filters' : [ 
       { 
        'property_name' : 'view.user_id', 
        'operator' : 'eq', 
        'property_value' : String(user_id) 
       } 
      ] 
     }); 

     client.draw(query, document.getElementById(element_id), { 
      chartType: 'columnchart', 
      width : graph_width, 
      height : 250, 
      colors : ['#abdd99', '#8dc7d9', '#eeeeee'], 
      colorMapping : { 
       'pro' : '#abdd99', 
       'basic' : '#8dc7d9' 
      }, 
      labelMapping: { 
       "basic": "BASIC", 
       "pro": "PRO" 
      }, 
      title : '', 
      chartOptions: { 
       width : '100%', 
       height : '100%', 
       isStacked: true, 
       fontName : 'Helvetica', 
       fontSize : '11px', 
       chartArea : { 
        left : '10px', 
        top : '0', 
        width : '90%', 
        height : '90%' 
       }, 
       axisTitlesPosition : 'in', 
       vAxis : { 
        viewWindowMode : 'pretty', 
        gridlines : { color : '#eeeeee' }, 
        baselineColor : '#eeeeee', 
        textPosition : 'in' 
       }, 
       hAxis : { 
        viewWindowMode : 'pretty', 
        gridlines : { 
         color : '#eeeeee' 
        }, 
        baselineColor : '#eeeeee', 
        textPosition : 'none' 
       }, 
       legend : { 
        position : 'in' 
       }, 
       titlePosition : 'none' 
      } 
     }); 

    });

這裏的提示是如何出現的截圖：

keen

來源

2015-05-14 Phil

這的確是可能的，但一個小的代碼示例展示瞭如何使用您的敏銳的數據將是有益的初始化圖表，我的意思是會產生更精確的答案。 – davidkonrad

嗨大衛，沒問題，我用代碼示例更新了我的帖子。謝謝 – Phil

好的，在哪裏？ :)只是你正在使用的JSON的一個示例。猜猜你有比https://keen.io/docs/getting-started-guide/ – davidkonrad

而不是

var chart = keenIoClient.draw(query, document.getElementById("chart2"), options);

手動將所有數據收集到數組，這樣你就可以在那裏添加更多列。以下是日期和綜合瀏覽的示例：

 keenIoClient.run(query, function(err, response){ 
      if (err) { 
      // there was an error! 
      } 
      else { 
       var arrayData = []; 
       arrayData.push(['Day','Views']); 
       response.result.forEach(function (element, index, array) { 
       var date = new Date(element.timeframe.start); 
       arrayData.push([date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() , element.value]); 
       }); 
       var data = google.visualization.arrayToDataTable(arrayData);     
       var chart = new google.visualization.ColumnChart(document.getElementById('chart2')); 
       chart.draw(data, options); 
      } 
     });

「選項」變量保持不變。

P.S.在路上你可以設置你的日期格式。

P.P.S.在我的情況下，查詢是：

 var query = new Keen.Query("count", { 
      eventCollection: "views", 
      interval: "daily", 
      timeframe: "this_7_days", 
     });

來源

2015-11-06 02:47:57

格式化通過Keen生成的Google柱狀圖的工具提示內容

回答

相關問題