Question

我想绘制一个双y轴和两个值系列的条形图。问题是：

如何自定义x轴标签？我希望以“dd / MM HH：mm：ss”的格式查看日期时间，但hAxis.format在google.charts.Bar中不起作用
如何自定义工具提示格式？它根据浏览器设置以区域设置格式显示，但我想使用自己的严格格式。例如，对于x轴，'dd / MM HH：mm：ss'; google.visualization。*的工具提示调整也不适用于google.charts.Bar

注意，自定义轴标签和工具提示工作正常google.visualization。*，但我需要一个双y轴的柱形图，只能用google.charts.Bar实现

以下是sample, drawing a chart with random data.所有自定义javascripts都是内联的。酒吧代表30分钟的时段。

这是JS代码：

        /**
        * transform a number of seconds to [ hour, min, sec ] array
        */
        function sec2array(d) {
            d = Math.round(parseFloat(d));
            var h = Math.floor(d / 3600);
            var m = Math.floor((d % 3600) / 60);
            var s = d % 60;
            return [ h, m, s ];
        }

        /**
        * represents a number of seconds in 'HH:ii:ss' format
        */
        function fmtInterval(d) {
            var arr = sec2array(d);
            return (arr[0] < 10 ? '0' : '') + arr[0]
                + ':' + (arr[1] < 10 ? '0' : '') + arr[1]
                + ':' + (arr[2] < 10 ? '0' : '') + arr[2];
        }

        /**
        * let's draw a sample chart with random data
        */
        function drawChart() {
            var formatter = new google.visualization.DateFormat({ pattern: 'dd/MM HH:mm' });

            var data = new google.visualization.DataTable({
                cols: [
                    { id: 'stamp', label: 'Time', type: 'datetime' },
                    { id: 'viewers', label: 'Viewers', type: 'number' },
                    { id: 'avgtime', label: 'Avg time', type: 'timeofday' },
                ],
            }, 0.6);

            // Making a Date object to iterate through the period
            var dd = new Date();
            dd.setDate(dd.getDate()-1);
            dd.setHours(0);
            dd.setMinutes(0);
            dd.setSeconds(0);
            dd.setMilliseconds(0);

            for(var i = 0;i < 1440;i += 30) {
                var avgtime = Math.random() * 1800; // 0 ... 30 minutes
                data.addRow([
                    // first column: the time scale
                    { v: new Date(dd), f: formatter.formatValue(dd) }, // formatted value does not work

                    // second column: random viewers count
                    Math.floor(Math.random() * 50),

                    // third column: average watch duration in form of timeofday. It can not be over 30 minutes, so I can do it in such kind
                    sec2array(avgtime),
                ]);

                // increase datetime by 30 minutes
                dd.setMinutes(dd.getMinutes() + 30);
            }

            var options = {
                width: 1000, height: 300,
                title: 'TV channel load chart',
                tooltip: { isHtml: true },
                focusTarget: 'category',
                bars: 'vertical',
                series: [
                    { axis: 'viewers' },
                    { axis: 'avgtime' }
                ],
                hAxis: {
                    format: 'dd/MM HH:mm'
                },
                axes: {
                    y: {
                        viewers: { label: 'Viewvers' },
                        avgtime: { side: 'right', label: 'Avg time' }
                    }
                },
            };

            var chart = new google.charts.Bar(document.getElementById("chart"));
            chart.draw(data, options);
        }

        // load google visualization API. Draw the chart when load complete
        google.load("visualization", "1.1",
            { packages: [ "corechart", "bar" ],
            callback: drawChart }
        );

Answer 1

阅读Google提供的information：

使用google.charts.Bar.convertOptions（）可以利用某些功能，例如hAxis / vAxis.format预设选项。

您的代码看起来像

chart.draw(data, options);

并将其更改为

chart.draw(data, google.charts.Bar.convertOptions(options));

让一切按预期工作。

Link to my fiddle

Answer 2

如果我是你，我会使用Moment.js来制作自定义日期格式。像这样：

moment().format("dd/MM HH:mm:ss");

自定义Google图表

2 个答案: