Как изменить направление только на один конкретный столбец с диаграммой google (комбинированная диаграмма)

1 Jayrex Acilo [2018-07-31 10:22:00]

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

Из этого следует смотреть.

Диаграмма Google 1

к этому.

Google chart 2

см. Эффективный столбец

codepen: https://codepen.io/jayrexacilo/pen/PBQwWQ

HTML:

<div id="call_analysis_container">
  <div class="chart-title bg-blue">Call analysis</div>
  <div id="call_analysis" style="width: 80%; height: 200px;"></div>
</div>

ЯШ:

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCallAnalysis);
function drawCallAnalysis() {
    var dataArr = [
      ["Analysis", "Calls", { role: "style" } ],
      ["Target Calls", 350, "#FFFF00"],
      ["On Route Calls", 185, "#00B050"],
      ["Off Route", 35, "#B1A0C7"],
      ["Calls not Made", 17, "#000000"],
      ["Effective", 120, "#E26B0A"]
    ];
    var data = google.visualization.arrayToDataTable(dataArr);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
                     { calc: "stringify",
                      sourceColumn: 1,
                      type: "string",
                      role: "annotation" },
                     2]);

    var options = {
      title: "",
      seriesType: 'bars',
      legend: { position: "none" },
      backgroundColor: '#4F81BD',
      vAxis: {
          textStyle: {color: '#4F81BD'},
          viewWindowMode:'none',
            viewWindow:{
              max:350,
              min:0
            },
          gridlines: {
            color: 'transparent',
            count: 8
          },
          direction: '-1'
        },
        enableInteractivity: false
    };
    var chart = new google.visualization.ComboChart(document.getElementById("call_analysis"));
    chart.draw(view, options);
  }

javascript google-visualization charts

Оригинал вопроса (на английском)

1 Решение WhiteHat [2018-07-31 19:36:00]

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

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

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

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCallAnalysis);
function drawCallAnalysis() {
  var dataArr = [
    ["Analysis", "Calls", { role: "style" } , "Calls", { role: "style" } ],
    ["Target Calls", 350, "#FFFF00", null, null],
    ["On Route Calls", 185, "#00B050", null, null],
    ["Off Route", 35, "#B1A0C7", null, null],
    ["Calls not Made", 17, "#000000", null, null],
    ["Effective", null, null, 120, "#E26B0A"]
  ];
  var data = google.visualization.arrayToDataTable(dataArr);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
  }, 2, 3, {
    calc: "stringify",
    sourceColumn: 3,
    type: "string",
    role: "annotation"
  }, 4]);

  var options = {
    title: '',
    seriesType: 'bars',
    legend: {position: 'none'},
    backgroundColor: '#4F81BD',
    vAxis: {
      textStyle: {color: '#4F81BD'},
      viewWindowMode: 'none',
      viewWindow: {
        max: 350,
        min: 0
      },
      gridlines: {
        color: 'transparent',
        count: 8
      }
    },
    vAxes: [
      {direction: -1},
      {direction: 1}
    ],
    series: {
      1: {
        targetAxisIndex: 1
      }
    },
    enableInteractivity: false
  };

  var chart = new google.visualization.ComboChart(document.getElementById('call_analysis'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="call_analysis"></div>

лучший подход может заключаться в том, чтобы рисовать две диаграммы, бок о бок...

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

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCallAnalysis);
function drawCallAnalysis() {
  var dataArr = [
    ["Analysis", "Calls", { role: "style" } ],
    ["Target Calls", 350, "#FFFF00"],
    ["On Route Calls", 185, "#00B050"],
    ["Off Route", 35, "#B1A0C7"],
    ["Calls not Made", 17, "#000000"],
    ["Effective", 120, "#E26B0A"]
  ];
  var data = google.visualization.arrayToDataTable(dataArr);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
  }, 2]);

  var viewa = new google.visualization.DataView(view);
  viewa.setRows([0, 1, 2, 3]);
  var viewb = new google.visualization.DataView(view);
  viewb.setRows([4]);

  var options = {
    annotations: {
      textStyle: {fontSize: 12}
    },
    chartArea: {
      width: '100%'
    },
    title: '',
    seriesType: 'bars',
    legend: {position: 'none'},
    backgroundColor: '#4F81BD',
    hAxis: {
      textStyle: {fontSize: 12},
    },
    vAxis: {
      textStyle: {color: '#4F81BD'},
      viewWindowMode: 'none',
      viewWindow: {
        max: 350,
        min: 0
      },
      gridlines: {
        color: 'transparent',
        count: 8
      },
      direction: '-1'
    },
    enableInteractivity: false
  };

  options.width = 100 * viewa.getNumberOfRows();
  var charta = new google.visualization.ComboChart(document.getElementById('call_analysis_a'));
  charta.draw(viewa, options);

  options.vAxis.direction = 1;
  options.width = 100 * viewb.getNumberOfRows();
  var chartb = new google.visualization.ComboChart(document.getElementById('call_analysis_b'));
  chartb.draw(viewb, options);
}

.container {
  background-color: #4F81BD;
  display: inline-block;
  padding: 24px;
  white-space: nowrap;
}

.chart {
  display: inline-block;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
  <div class="chart" id="call_analysis_a"></div>
  <div class="chart" id="call_analysis_b"></div>
</div>

Оригинал ответа (на английском)

Как изменить направление только на один конкретный столбец с диаграммой google (комбинированная диаграмма)

1 ответ