无法在Google图表中横向轴上格式化标签

时间:2016-01-11 12:17:48

标签: javascript charts google-visualization linechart

我正在尝试创建一个图表,显示比特币价格相对于INR货币的波动。数据来自此链接:Bitcoin API

我已经编写了这段代码,但这是我无法执行的内容。

图表水平轴的标签未正确格式化。例如我不希望在水平轴下方显示“15-12-31 06:05:09”,而是显示“31 Dec”。此外,我希望为图表设置一个标题,并为水平和垂直轴设置相应的标题。

垂直轴上的标签显示30K等数字。我怎么能让它看起来像“30,000”?将鼠标悬停在折线图上时生成的详细信息框也需要相同。

我的代码:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Graph Test</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
        <script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="graph">
            <script type="text/javascript">
                google.load('visualization', '1.0', {'packages':['line']});
                google.setOnLoadCallback(drawChart);
                function drawChart()
                {
                    $.get("https://api.bitcoinaverage.com/history/INR/per_hour_monthly_sliding_window.csv", function(csvString)
                        {
                             var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
                             var data = new google.visualization.arrayToDataTable(arrayData);
                             var view = new google.visualization.DataView(data);
                             view.setColumns([0,3]);

                             var options = {
                                title : "INR/BTC Exchange Rates",
                                hAxis: {
                                    title: "Date",
                                    format: 'yyyy-MM-dd',
                                    minValue: data.getColumnRange(0).min,
                                    maxValue: data.getColumnRange(0).max
                                },
                                vAxis: {title: data.getColumnLabel(3), minValue: data.getColumnRange(3).min, maxValue: data.getColumnRange(3).max},
                                legend: 'none',
                             };

                             var chart = new google.charts.Line(document.getElementById('graph'));
                             chart.draw(view,options);
                        });
                };

            </script>
        </div>
    </body>
</html>

0 个答案:

没有答案