Форматирование диаграмм в ChartWrapper в Google Charts

Question

Я создаю множество диаграмм, используя часть Dashboard в Google Charts.

Чтобы сделать свои графики я использую конвенцию:

var chartName = new google.visualization.ChartWrapper({ 
    // lots of options here 
}); 

Однако, есть некоторые детали настройки, которые не называется, когда я вхожу их внутри объекта ChartWrapper.

В частности, линии тренда, изменяя полоски на горизонте на гистограмме и делая столбики сложены.

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

Я предполагаю, что есть общий элемент, который мне не хватает во всех этих случаях, поэтому я подумал, что лучше всего включить их в один вопрос. Должно быть несколько деталей о синтаксисе ChartWrapper, который я не получаю.

Для всех вышеперечисленных элементов я сначала помещаю их в объект «options», а затем как собственный ключ непосредственно внутри ChartWrapper() без дополнительной вложенности.

Чтобы попасть в более специфических:

КОД:

Вот пример кода, который не работает:

var childrenHelpedChart = new google.visualization.ChartWrapper({ 
     'chartType'  : 'Bar', 
     'containerId'  : 'chart_div2', 
     'view'   : { 
      'columns'  : [0, 2, 3] 
     }, 

     'options'   : { 
      'height'  : 400, 
      'trendlines' : {0 : {}}, 
      'isStacked' : 'percent', 
      'bar'   : 'horizontal' 
     }, 
    }); 

В приведенной я использую в ответ на переменную «высота», но «линии тренда», «isStacked» и «bar» все падают на глухие уши.

Однако, если я размещаю их вне объекта «options», они также не отображаются на диаграмме.

Например, приведенный ниже код также не действует.

Кодекса2:

var childrenHelpedChart = new google.visualization.ChartWrapper({ 
     'chartType'  : 'Bar', 
     'containerId'  : 'chart_div2', 
     'view'   : { 
      'columns'  : [0, 2, 3] 
     }, 

     'options'   : { 
      'height'  : 400 
     }, 
     'trendlines'  : { 
      0    : {} 
     }, 
     'bar'    : 'horizontal', 
     isStacked  : 'percent' 
}); 

Я вижу две очень похожие вопросы here и here, но ни один из них есть ответы.

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

SCRIPT:

google.charts.setOnLoadCallback(initialize); 

function initialize() { 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=1104676809'); 
    query.send(drawDashboard) 
} 

function drawDashboard(response) { 

    var data = response.getDataTable(); 

    var dashboard = new google.visualization.Dashboard(
     document.getElementById('dashboard_div')); 

    var storytimeDateFilter2 = new google.visualization.ControlWrapper({ 
     'controlType': 'DateRangeFilter', 
     'containerId': 'date_filter_div2', 
     'options' : { 
      'filterColumnIndex' : 0 
     } 
    }); 

    var childrenHelpedChart = new google.visualization.ChartWrapper({ 
     'chartType'  : 'Bar', 
     'containerId'  : 'chart_div2', 
     'view'   : { 
      'columns'  : [0, 2, 3] 
     }, 

     'options'   : { 
      'height'  : 400 
     }, 
     'trendlines'  : { 
      0    : {} 
     }, 
     'bar'    : 'horizontal', 
     'isStacked'  : 'percent' 
    }); 

dashboard.bind(storytimeDateFilter2, childrenHelpedChart); 
dashboard.draw(data); 
} 

Answer 1

графики вы используете являются Материал диаграммы
есть несколько варианты, которые просто не работают с Материал диаграммы
вы можете найти здесь ->Tracking Issue for Material Chart Feature Parity #2143

исправить, вы можете использовать Ключевых диаграммы версий,
с дополнительной опцией ->theme: 'material'

Материал = 'Bar'

var childrenHelpedChart = new google.visualization.ChartWrapper({ 
    'chartType'  : 'Bar', // <- Material version 
    'containerId'  : 'chart_div2', 
    'view'   : { 
     'columns'  : [0, 2, 3] 
    }, 

    'options'   : { 
     'height'  : 400, 
     'trendlines' : {0 : {}}, 
     'isStacked' : 'percent', 
     'bar'   : 'horizontal' 
    }, 
}); 

ядра = 'BarChart' (горизонтальный) - или - 'ColumnChart' (вертикальный)

var childrenHelpedChart = new google.visualization.ChartWrapper({ 
    'chartType'  : 'BarChart', // <-- Core version 
    'containerId'  : 'chart_div2', 
    'view'   : { 
     'columns'  : [0, 2, 3] 
    }, 

    'options'   : { 
     'height'  : 400, 
     'trendlines' : {0 : {}}, 
     'isStacked' : 'percent', 
     'theme'  : 'material' // <- Material theme 
    }, 
});