2016-10-14 3 views
1

Я использую Google Charts для визуализации некоторых показателей, и я столкнулся с некоторой проблемой. Сейчас у меня есть гистограмма, который выглядит следующим образом (код ниже) Current Chart и коды за этоКак создать сложную гистограмму для трех наборов данных?

Javascript

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', { 'packages': ['bar', 'corechart'] }); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3'], 
      ['Chicago', 400, 500, 1000], 
      ['New York', 400, 500, 1000], 
      ['Seattle', 400, 500, 1000], 
      ['Average', 400, 500, 1000] 
     ]); 

     var options = { 
      chart: { 
       //title: 'Sales Order Performance', 
       //subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
      }, 
      bars: 'horizontal', // Required for Material Bar Charts. 
      hAxis: { format: 'decimal' }, 
      height: 400, 
      colors: ['#1b9e77', '#d95f02', '#7570b3'] 
     }; 

     var chart = new google.charts.Bar(document.getElementById('chart_div')); 

     chart.draw(data, google.charts.Bar.convertOptions(options)); 

     var btns = document.getElementById('btn-group'); 

     btns.onclick = function (e) { 

      if (e.target.tagName === 'BUTTON') { 
       options.hAxis.format = e.target.id === 'none' ? '' : e.target.id; 
       chart.draw(data, google.charts.Bar.convertOptions(options)); 
      } 
     } 
    } 
</script> 

HTML

<body> 
    <div id="chart_div"></div> 
</body> 

Взяты из некоторых подобных ответов, то ближайший, который я получил, изменяет несколько уже размещенных скриптов, но ничего, похоже, не работает, как мне это нужно. Я пытаюсь совместить диаграмму, которую я предоставил с помощью Stacked Bar Graph (как показано и объяснено here, но все маленькие одноразовые хаки, которые я видел в Google или на переполнении стека, не получают мне то, что мне нужно.

я принципиально хочу бар «DataSet 3», чтобы иметь возможность быть разбито на строки, подобных этой

Stacked Bar Chart

Как я могу повернуть диаграмму у меня уже есть в столбчатом граф, который имеет 3 бара за точку данных? И если этого не может быть сделано, то чем ближе я могу сделать, чтобы получить аналогичный результат?

Редактировать: Забыл добавить скрипку, о которой я упоминал ранее. Это так близко, что я получил конечный результат, который мне нужен http://jsfiddle.net/qv325979/126/, но он все еще не совсем прав, и пример, с которого я начал работать, должен был сильно измениться, чтобы добраться до этого момента. Я, по сути, пытаюсь найти его там, где есть 3 бара (вместо 2), а верхние 2 бара для каждого элемента имеют 1 точку данных, а нижний план можно разделить на 5 или около того.

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

+1

в скрипку, установка опции 'series.5', ломает последний столбец из стека ... – WhiteHat

+0

Благодаря @WhiteHat так, что путь к достижению желаемый результат, когда у меня есть 2 бара с одним сегментом, а затем 3-й бар с 5 или около того? – Mkalafut

ответ

1

в есть 2 бара с только 1 сегмент, а затем третий бар с 5 или так ...

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

Используйте hAxes возможность скрывать метки дополнительной оси

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

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'], 
 
     ['Chicago', 400, 500, 200, 200, 200, 200, 200], 
 
     ['New York', 400, 500, 200, 200, 200, 200, 200], 
 
     ['Seattle', 400, 500, 200, 200, 200, 200, 200], 
 
     ['Average', 400, 500, 200, 200, 200, 200, 200] 
 
    ]); 
 

 
    var options = { 
 
     hAxes: { 
 
     1: { 
 
      textStyle: { 
 
      color: 'transparent' 
 
      } 
 
     }, 
 
     2: { 
 
      textStyle: { 
 
      color: 'transparent' 
 
      } 
 
     } 
 
     }, 
 
     bars: 'horizontal', 
 
     colors: ['#1b9e77', '#d95f02', '#7570b3'], 
 
     hAxis: { 
 
     format: 'decimal' 
 
     }, 
 
     height: 400, 
 
     isStacked: true, 
 
     series: { 
 
     0: { 
 
      targetAxisIndex: 1 
 
     }, 
 
     1: { 
 
      targetAxisIndex: 2 
 
     } 
 
     } 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('chart_div')); 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
    }, 
 
    packages: ['bar'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

EDIT

с использованием ядра диаграммы является еще одним вариантом,
следующего параметра конфигурации получите диаграмму близко к взгляду & ощущения материал

theme: 'material'

однако, ядро ​​ диаграммы не группе так же, как материала

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

и не будет автоматически регулировать последний цвет

см. Следующий рабочий снип домашнее животное ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'], 
 
     [' ', 400, null, null, null, null, null, null], 
 
     ['Chicago', null, 500, null, null, null, null, null], 
 
     [' ', null, null, 200, 200, 200, 200, 200], 
 
     [' ', null, null, null, null, null, null, null], 
 
     [' ', 400, null, null, null, null, null, null], 
 
     ['New York', null, 500, null, null, null, null, null], 
 
     [' ', null, null, 200, 200, 200, 200, 200], 
 
     [' ', null, null, null, null, null, null, null], 
 
     [' ', 400, null, null, null, null, null, null], 
 
     ['Seattle', null, 500, null, null, null, null, null], 
 
     [' ', null, null, 200, 200, 200, 200, 200], 
 
     [' ', null, null, null, null, null, null, null], 
 
     [' ', 400, null, null, null, null, null, null], 
 
     ['Average', null, 500, null, null, null, null, null], 
 
     [' ', null, null, 200, 200, 200, 200, 200], 
 
    ]); 
 

 
    var options = { 
 
     colors: ['#1b9e77', '#d95f02', '#4a148c', '#7b1fa2', '#9c27b0', '#ba68c8', '#e1bee7'], 
 
     bar: { 
 
     groupWidth: '90%' 
 
     }, 
 
     hAxis: { 
 
     format: 'decimal' 
 
     }, 
 
     height: 400, 
 
     isStacked: true, 
 
     theme: 'material' 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

Я заметил, что в вашем примере полосы доходят до конца, несмотря на наличие только таких значений, как 400, 500 и т. Д. В вашем фрагменте DataSet 2 не проходит полностью, но когда я запускаю его локально, все 3 бары доходят до конца. Это что-то не так с настройкой таблицы? Также есть разница между тем, как вы настраиваете свою функцию по сравнению с тем, как я установил мой? Например, ваш, кажется, находится в фактической нагрузке на диаграмму, тогда как моя была сделана после загрузки графика. – Mkalafut

+1

Я обычно включаю 'callback' в' load' -операцию - то же, что и 'setOnLoadCallback' - как для значений _going all the way_ - сначала не заметил, но это связано с несколькими осями '- удалите опции «color:« transparent », и это будет иметь смысл - есть три строки меток оси x - каждая, вероятно, заканчивается другим значением - использование базовой диаграммы и материала позволит увеличить гибкость имея дело с такими проблемами, потому что [есть много вариантов, которые просто не работают на диаграммах _material_] (https://github.com/google/google-visualization-issues/issues/2143) ... – WhiteHat

+0

Еще раз спасибо за ответ. Я изначально выбрал материал, потому что это выглядело так, будто это был самый близкий график того, что я хотел построить. На самом деле у меня тоже нет опыта, но вместо этого я рассмотрю основные диаграммы. Как изменится базовая диаграмма в примере, который вы указали? – Mkalafut

Смежные вопросы