Question

我已经从上到下颠倒了列栏，但由于某种原因，我希望不要将一个列栏颠倒。我不知道如何实现这一目标。

应该从这里看。

对此。

请参见有效列

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>

js：

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);
  }

Answer 1

在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 个答案: