Question

我们在网站上使用Keen来跟踪视图数据。这很好但我遇到了一些问题，如图中的某些数据（使用JS SDK的v3.0.5）。在用户仪表板上，我们有一个显示过去4个月数据的图表（时间范围：this_4_months）。我有一个问题 -

当用户将鼠标悬停在其中一列上时，您会在工具提示中看到详细信息，例如＆＃34; 2015年4月1日12:00:00 AM＆＃34; - 有什么办法可以将这个工具提示格式化为更加用户友好的东西吗？例如＆＃34; 2015年4月＆＃34;

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

Answer 1

而不是

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

＆＃34;选项＆＃34;变量保持不变。

P.S。在你可以设置日期格式的方式上。

P.P.S。在我的情况下，查询是：

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

格式化由Keen生成的Google柱形图的工具提示内容

1 个答案: