Javascript 定制谷歌图表

我想画一个双y轴和双值系列的条形图。 问题是:

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

注意，轴标签和工具提示的自定义在google.visualization.*上正常工作，但我需要一个具有双y轴的柱状图，这只能通过google.charts.Bar实现

下面是所有自定义Java脚本都是内联的。 条形图表示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 }
        );

/**
*将秒数转换为[小时、分钟、秒]数组
*/
函数sec2array（d）{
d=数学圆（解析浮点（d））；
var h=数学楼层（d/3600）；
var m=数学下限（（d%3600）/60）；
var s=d%60；
返回[h，m，s]；
}
/**
*表示“HH:ii:ss”格式的秒数
*/
功能fmtInterval（d）{
var arr=sec2阵列（d）；
返回（arr[0]<10？'0'：''）+arr[0]
+“：”+（arr[1]<10？'0'：“”）+arr[1]
+“：”+（arr[2]<10？'0'：”）+arr[2]；
}
/**
*让我们用随机数据绘制一个样本图表
*/
函数绘图图（）{
var formatter=new google.visualization.DateFormat（{pattern:'dd/MM HH:MM'}）；
var data=new google.visualization.DataTable({
科尔斯：[
{id:'stamp'，label:'Time'，type:'datetime'}，
{id:'viewers'，label:'viewers'，type:'number'}，
{id:'avgtime'，标签：'Avg time'，键入：'timeofday'}，
],
}, 0.6);
//创建一个日期对象以循环周期
var dd=新日期（）；
dd.setDate（dd.getDate（）-1）；
dd.setHours（0）；
dd.setMinutes（0）；
dd.setSeconds（0）；
dd.setms（0）；
对于（变量i=0；i<1440；i+=30）{
var avgtime=Math.random（）*1800；//0…30分钟
data.addRow([
//第一栏：时间尺度
{v:new Date（dd），f:formatter.formatValue（dd）}，//格式化值不起作用
//第二列：随机观众计数
Math.floor（Math.random（）*50），
//第三栏：以天的时间形式表示的平均手表持续时间。它不能超过30分钟，所以我可以这样做
sec2array（平均时间），
]);
//将datetime增加30分钟
dd.setMinutes（dd.getMinutes（）+30）；
}
变量选项={
宽度：1000，高度：300，
标题：“电视频道负载表”，
工具提示：{isHtml:true}，
焦点目标：“类别”，
酒吧：“垂直”，
系列：[
{axis:'查看器'}，
{axis:'avgtime'}
],
哈克斯：{
格式：'dd/MM HH:MM'
},
轴线：{
y:{
查看者：{标签：'查看者'}，
avgtime:{side:'right'，label:'Avg time'}
}
},
};
var chart=new google.charts.Bar（document.getElementById（“chart”）；
图表绘制（数据、选项）；
}
//加载谷歌可视化API。加载完成后绘制图表
加载（“可视化”，“1.1”，
{软件包：[“corechart”，“bar”]，
回调：drawChart}
);

如果我是你，我会使用自定义日期格式。像这样：

moment（）格式（“dd/MM HH:MM:ss”）
阅读谷歌提供的：

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

你的代码看起来像

chart.draw(data, options);

把它改成

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

使一切按预期进行

问题不在于设置日期时间的格式，而是将其应用于google.charts.Bar。无论如何，谢谢你的提示，我不知道这个图书馆的事，谢谢。我好像错过了那个医生。这就是我要找的）