Google Charts fontsize не работает

Question

Возможно ли создать диаграмму с такими диаграммами Google, как это на картинке? Моя самая большая проблема заключается в том, чтобы получить шрифт слева слева. Вторая проблема заключается в том, чтобы получить время, подобное 12:00 PM 13:00 PM 14:00 PM , и можно ли выбрать таймфрейм, как в нижнем колонтитуле на картинке?

JsFiddle: http://jsfiddle.net/j29Pt/5/

google.load("visualization", "1", { 
    packages: ["corechart"] 
}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'dummy', 'Sales'], 
     [12, 0, 440], 
     [13, null, 450], 
     [14, null, 412], 
     [15, null, 434] 
    ]); 

    var options = { 
     series: { 
      0: { 
       targetAxisIndex: 0, 
       visibleInLegend: false, 
       pointSize: 0, 
       lineWidth: 0 
      }, 
      1: { 
       targetAxisIndex: 1, 
       visibleInLegend: false, 
      } 
     }, 
     colors: ['red'], 
     backgroundColor: '#324149', 
     chartArea: { 
      backgroundColor: { 
       stroke: '#fff', 
       strokeWidth: 0 
      } 
     }, 
     hAxis: { 
      gridlines: { 
       color: '#37454c', 
       count: 7 
      }, 
      textStyle: { 
       color: '#fff' 
      } 
     }, 
     vAxis: { 
      gridlines: { 
       color: '#37454c', 
       count: 7 
      }, 
      textStyle: { 
       color: '#525b60', 
       fontSize: '3' 
      }, 
      minValue: 390 
     }, 
     vAxes: { 
      0: { 
       textPosition: 'none' 
      }, 
      1: { 
       textPosition: 'in' 
      } 
     } 
    } 
    var chart = new google.visualization.AreaChart(document.getElementById('chart')); 
    chart.draw(data, options); 
} 

Answer 1

Ваша проблема FONTSIZE не из-за кода, у вас есть возможность "нормализованной CSS" проверить в панели "Fiddle Options", который баловаться с размеры шрифта в диаграмме. Снимите этот флажок, и ваши шрифты будут иметь указанный размер. Кстати, подопция fontSize занимает номер, а не строку, поэтому он должен быть fontSize: 3.

Вы можете добавить кнопки в свой HTML, которые реплицируют функциональные возможности фрейма, но элемент управления ChartRangeFilter выполняет аналогичную функцию без необходимости в какой-либо пользовательской кодировке.

Если вы хотите, чтобы ваши значения оси были отформатированы как время, вам нужно использовать либо домен «дата», «время жизни», либо «время-время» (x). Затем вы можете указать форматирование в опции hAxis.format диаграммы.