Как установить ориентацию для текста или значения аннотации

1

Я начинаю учиться с помощью Google Visualization для своей сети.

У меня есть некоторые проблемы с аннотацией. Текст аннотации накапливается, по-моему, данные бесполезны, если его невозможно прочитать

Изображение 174551

это мой код для аннотации

var options = {
    width: 1200,
    height: 680,
    vAxis: {title: 'QTY'},
    hAxis: {title: 'DAYS'},
    legend: { position: 'center', maxLines: 3 },
    bar: { groupWidth: '80%' },
    isStacked: true,
    title : 'PRODUCTION BY PROCESS <?php echo $proc;?> SECTION <?php echo $fact;?> <?php echo $Date ?> ',
    series: {20: {type: 'line'}}
};

Как настроить ориентацию текста или значения аннотации против часовой стрелки или сделать текст аннотации не складывающимся, как изображение.

  • 0
    Почему это помечено с помощью PHP, а не Javascript?
Теги:
charts
google-visualization

1 ответ

1
Лучший ответ

чтобы повернуть аннотации, измените style на 'line'

var options = {
  annotations: {
    style: 'line'
  }
};

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [
      "x",
      "y0",
      "y1",
      "y2",
      "y3"
    ],
    ["29-04-2017", 212558.50, 212558.2, 212558.4, 212555.5],
    ["13-05-2017", 212558.60, 212558.32, 212558.53, 212555.67],
    ["12-06-2017", 212558.30, 212558.72, 212558.13, 212555.37],
    ["23-08-2017", 212558.50, 212558.22, 212558.43, 212555.57]
  ]);

  var viewColumns = [0];
  $.each(new Array(data.getNumberOfColumns() - 1), function (index) {
    viewColumns.push(index + 1);
    viewColumns.push({
      calc: function (dt, row) {
        return dt.getFormattedValue(row, index + 1);
      },
      role: 'annotation',
      type: 'string'
    });
  });
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var options = {
    annotations: {
      style: 'line'
    },
    colors: ["#0F5470", "#8EA3A4", "#3EB8BC", "#98D4F2"]
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Поделиться
  • 0
    Большое спасибо, это работает. Еще 1 вопрос. Есть ли какой-нибудь стиль для аннотаций помимо стиля линии?
  • 1
    других стилей нет, но вы можете изменить длину ствола и другие параметры, см. параметры конфигурации
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню