1

Google の仮想化でタイムラインを作成しています。これはうまくいきます。私の唯一の問題は、バーにカーソルを合わせると表示されるツールボックス内に表示される日付です。

日付形式は月-年のままです。Google Visualization APIを調べたところ、dateformat 関数が見つかりました。これはまさに私が必要としていたものです。コードに実装しようとしましたが、無視しているようです。

これまでの私のjavascriptは次のとおりです:(またはライブバージョンはこちら)

var container = document.getElementById('example1');
var chart = new google.visualization.Timeline(container);

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
    type: 'string',
    id: 'Title'
});
dataTable.addColumn({
    type: 'string',
    id: 'Status'
});
dataTable.addColumn({
    type: 'date',
    id: 'Start'
});
dataTable.addColumn({
    type: 'date',
    id: 'End'
});
dataTable.addRows([
    ["1", "Planning", new Date(2013, 5, 20), new Date(2013, 6, 21)],
    ["2", "Design", new Date(2013, 6, 25), new Date(2013, 7, 25)],
    ["3", "Development", new Date(2013, 7, 25), new Date(2013, 10, 11)],
    ["4", "Implementation", new Date(2013, 10, 15), new Date(2013, 11, 14)],
    ["5", "Testing", new Date(2013, 11, 18), new Date(2013, 12, 10)],
    ["6", "Delivering", new Date(2013, 12, 1), new Date(2013, 12, 21)]
]);

var formatter = new google.visualization.DateFormat({
    formatType: 'medium'
});

formatter.format(dataTable, 2);
formatter.format(dataTable, 3);

var options = {
    timeline: {
        showRowLabels: false,
        barLabelStyle: {
            fontSize: 10
        },
        groupByRowLabel: false,
        colorByRowLabel: false
    },
    avoidOverlappingGridLines: false,
    colors: ['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58', '#A7A7A7']
};

chart.draw(dataTable, options);

ご覧のとおり、開始日と終了日を「中」形式にフォーマットしようとしています。しかし、グラフが描画されると、まだ月-年の形式が表示されます。

どうすればこれを機能させることができますか?

4

1 に答える 1