Google Line Charts hAxis部分偏移&重叠Java日期

时间:2016-05-31 21:13:20

标签: date google-visualization overlap linechart sections

Current & Previous Week Google Line Charts to show issue

背景:此图表每周以编程方式更新,并且已经运行了好几个月。折线图跟踪给定状态下系统的百分比,调出系统的数量,以及滚动年份的趋势线。

问题:本周如链接图像顶部所示(生成数据或图表的代码没有变化),hAxis日期范围的看似随机部分已向右移动,与其他日期重叠。线条上的趋势和注释看起来是正确的。

非常感谢任何见解或指导!

代码:

  <script type="text/javascript" 
      src="https://www.google.com/jsapi?autoload={
        'modules':[{
          'name':'visualization',
          'version':'1',
          'packages':['corechart']
        }]
      }"></script>

    <script type="text/javascript">
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        // Create the data table.
        var data = google.visualization.arrayToDataTable([
        ['Date', 'Percent ', {type: 'number', role: 'annotation'}],[new Date(2015, 4, 30), 0.016119402985075, 81],[new Date(2015, 5, 06), 0.018779342723005, 96],[new Date(2015, 5, 13), 0.025033960799534, 129],[new Date(2015, 5, 20), 0.018069973087274, 94],[new Date(2015, 5, 27), 0.017182130584192, 90],[new Date(2015, 6, 04), 0.023132347364429, 122],[new Date(2015, 6, 11), 0.019939804364184, 106],[new Date(2015, 6, 18), 0.017420311341735, 94],[new Date(2015, 6, 25), 0.017922457937089, 98],[new Date(2015, 7, 01), 0.017391304347826, 96],[new Date(2015, 7, 08), 0.020658949243099, 116],[new Date(2015, 7, 15), 0.022210563133963, 127],[new Date(2015, 7, 22), 0.018635664216105, 109],[new Date(2015, 7, 29), 0.017215189873418, 102],[new Date(2015, 8, 05), 0.018827057647451, 113],[new Date(2015, 8, 12), 0.015666226912929, 95],[new Date(2015, 8, 19), 0.013627514600909, 84],[new Date(2015, 8, 26), 0.016435295994894, 103],[new Date(2015, 9, 03), 0.014991320814265, 95],[new Date(2015, 9, 10), 0.013443801782085, 86],[new Date(2015, 9, 17), 0.014195340225274, 92],[new Date(2015, 9, 24), 0.015899709524538, 104],[new Date(2015, 9, 31), 0.01468824940048, 98],[new Date(2015, 10, 07), 0.016303542315103, 110],[new Date(2015, 10, 14), 0.015366603248939, 105],[new Date(2015, 10, 21), 0.017199017199017, 119],[new Date(2015, 10, 28), 0.016353464352317, 114],[new Date(2015, 11, 05), 0.015175152460644, 107],[new Date(2015, 11, 12), 0.017195582273172, 123],[new Date(2015, 11, 19), 0.015932391244112, 115],[new Date(2015, 11, 26), 0.017364939360529, 126],[new Date(2016, 0, 02), 0.012350761630301, 90],[new Date(2016, 0, 09), 0.017178412011362, 127],[new Date(2016, 0, 16), 0.02000266702227, 150],[new Date(2016, 0, 23), 0.017802980350785, 135],[new Date(2016, 0, 30), 0.017995857068876, 139],[new Date(2016, 1, 06), 0.015858805473846, 124],[new Date(2016, 1, 13), 0.018248637688506, 144],[new Date(2016, 1, 20), 0.018827930174564, 151],[new Date(2016, 1, 27), 0.018682276746793, 150],[new Date(2016, 2, 05), 0.01676321952422, 136],[new Date(2016, 2, 12), 0.022989903904634, 189],[new Date(2016, 2, 19), 0.018874729502284, 157],[new Date(2016, 2, 26), 0.018192698982645, 152],[new Date(2016, 3, 02), 0.017251565638662, 146],[new Date(2016, 3, 09), 0.014193548387097, 121],[new Date(2016, 3, 16), 0.012823475046211, 111],[new Date(2016, 3, 23), 0.015923931721847, 139],[new Date(2016, 3, 30), 0.015510019246009, 137],[new Date(2016, 4, 07), 0.014972067039106, 134],[new Date(2016, 4, 14), 0.019345567101481, 175],[new Date(2016, 4, 21), 0.01909150757077, 174],[new Date(2016, 4, 28), 0.018032786885246, 165]        ]);
        // Set chart options
        var options = {
            animation: {startup: 'true', duration: '500'},
            annotations: {'textStyle': {'color': 'black'}, 'style': 'point'},
            chartArea: {right: '20', bottom: '70', left: '70', top: 50, height: '60%', width: '90%'},
            'title':'Rolling Year:  Trend by Week',
            'width':1500,
            'height':400,
            hAxis: {textPosition: 'out', gridlines: {color: 'transparent'}, textStyle: {fontSize: '10'}, slantedText: 'true', ticks: [new Date(2015, 4, 30), new Date(2015, 5, 06), new Date(2015, 5, 13), new Date(2015, 5, 20), new Date(2015, 5, 27), new Date(2015, 6, 04), new Date(2015, 6, 11), new Date(2015, 6, 18), new Date(2015, 6, 25), new Date(2015, 7, 01), new Date(2015, 7, 08), new Date(2015, 7, 15), new Date(2015, 7, 22), new Date(2015, 7, 29), new Date(2015, 8, 05), new Date(2015, 8, 12), new Date(2015, 8, 19), new Date(2015, 8, 26), new Date(2015, 9, 03), new Date(2015, 9, 10), new Date(2015, 9, 17), new Date(2015, 9, 24), new Date(2015, 9, 31), new Date(2015, 10, 07), new Date(2015, 10, 14), new Date(2015, 10, 21), new Date(2015, 10, 28), new Date(2015, 11, 05), new Date(2015, 11, 12), new Date(2015, 11, 19), new Date(2015, 11, 26), new Date(2016, 0, 02), new Date(2016, 0, 09), new Date(2016, 0, 16), new Date(2016, 0, 23), new Date(2016, 0, 30), new Date(2016, 1, 06), new Date(2016, 1, 13), new Date(2016, 1, 20), new Date(2016, 1, 27), new Date(2016, 2, 05), new Date(2016, 2, 12), new Date(2016, 2, 19), new Date(2016, 2, 26), new Date(2016, 3, 02), new Date(2016, 3, 09), new Date(2016, 3, 16), new Date(2016, 3, 23), new Date(2016, 3, 30), new Date(2016, 4, 07), new Date(2016, 4, 14), new Date(2016, 4, 21), new Date(2016, 4, 28)], title: 'Reporting Week', format: 'yyyy-MM-dd'},
            vAxis: {showTextEvery: '1', title: 'Percent & Count ', format: '#,###.#%'},
            legend: {position: 'top'},
            trendlines: { 0: {visibleInLegend: true, pointsVisible: false, title: 'Trend', color: 'red'} }
            };
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('DS_Trend'));
        google.visualization.events.addListener(chart, 'ready', function () {

        console.log(DS_Trend.innerHTML);
        });
        chart.draw(data, options);
    }
    </script>

0 个答案:

没有答案