Стилизация линейных графиков Google - PullRequest
Новая
       10

Стилизация линейных графиков Google

2 голосов
/ 10 января 2012

Я хочу использовать графики Google в моем новом веб-проекте.Я хочу стилизовать их так, как показано на этой картинке и показывать даты между месяцами.Не могли бы вы сказать мне, как это сделать, если это возможно?

1 Ответ

1 голос
/ 10 февраля 2013

Если вы пытаетесь рисовать линейные графики Google с помощью инструментов Google Chart> Галерея диаграмм , я настоятельно рекомендую поиграть с «Площадка визуализации» или «Код игровая площадка».

Перейдите в Google Chart, выберите обзор> Галерея диаграмм> Диаграммы площадей (в вашем случае) и, как правило, ниже примера рисунка диаграммы, найдите ссылку "Площадка визуализации".

Играйте с кодом, пока не поймете, что он делает, и обратите внимание на следующий код в функции drawVisualization: 

var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by ....',
    isStacked: true,
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"}
  });

Вернитесь в Параметры конфигурации и используйте эти параметры для стилизации ваших диаграмм, например, если вы хотите поместить все в черный цвет, добавьте еще одну строку с параметром colors: ['black'] или измените цвета на черный, оранжевый и красный, например: 

var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
      ac.draw(data, {
        title : 'Monthly Coffee Production by ....',
        isStacked: true,
        width: 600,
        height: 400,
        vAxis: {title: "Cups"},
        hAxis: {title: "Month"},
        colors: ['#000000', '#FF6600', 'red']
      });

Надеюсь, это поможет

...