4

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

当用户将鼠标悬停在其中一个列上时，您会在工具提示中看到详细信息，例如“2015 年 4 月 1 日上午 12:00:00” - 有没有办法将此工具提示格式化为更用户友好的内容？例如“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'
            }
        });

    });

这是工具提示出现方式的屏幕截图：

敏锐的

4

1 回答 1

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

“选项”变量保持不变。

PS关于您可以设置日期格式的方式。

PPS 在我的情况下，查询是：

        var query = new Keen.Query("count", {
            eventCollection: "views",
            interval: "daily",
            timeframe: "this_7_days",
        });
于 2015-11-06T02:47:57.210 回答