通过 Keen 生成的 Google 柱形图的格式工具提示内容答案

【问题标题】：Format tooltip content of Google column chart generated via Keen通过 Keen 生成的 Google 柱形图的格式工具提示内容
【发布时间】：2015-05-14 11:16:10
【问题描述】：

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

当用户将鼠标悬停在其中一列上时，您会在工具提示中看到详细信息，例如“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'
            }
        });

    });

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

【问题讨论】：

确实有可能，但是一个小代码示例展示了如何使用敏锐的数据初始化图表会有所帮助，我的意思是会产生更准确的答案。
嗨，David，没问题，我已经用代码示例更新了我的帖子。谢谢
好的，在哪里？ :) 只是您正在使用的热衷于 JSON 的一个示例。猜猜你的结果比keen.io/docs/getting-started-guide中的例子更复杂
对不起..由于某种原因无法编辑我自己的问题，因此我将其添加到下面的“答案”中。希望这会有所帮助！
将您的“答案”编辑到问题中并更正了语法突出显示。 现在您可以删除下面的答案。我们绝不应该滥用答案按钮来评论或增强问题（无意冒犯）。

标签： google-visualization keen-io

【解决方案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);
          }
        });

“选项”变量保持不变。

附：您可以设置日期格式。

P.P.S.就我而言，查询是：

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

【讨论】：