2016-08-31 4 views
0

Я использовал все трюки в коробке. После прочтения всех статей справки, которые я нашел, я думал, что этот код действительно должен работать. Но он никогда не окрашивает мои бары. Что я делаю не так?Google Chart Цвет отдельных баров

google.charts.load('current', { 
 
    packages: ['corechart', 'bar'] 
 
}); 
 
google.charts.setOnLoadCallback(drawDualX); 
 

 
function drawDualX() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Elevation', { 
 
     role: 'style' 
 
    }], 
 
    ['2016-08-06T08:09:47Z', 1977.4, 'color: yellow'], 
 
    ['2016-08-06T08:13:29Z', 1981, 'color: green'], 
 
    ['2016-08-06T08:14:08Z', 1986.9, 'color: yellow'], 
 
    ['2016-08-06T08:14:22Z', 1988.9, 'color: green'], 
 
    ['2016-08-06T08:14:25Z', 1989.2, 'color: green'], 
 
    ['2016-08-06T08:14:29Z', 1989.7, 'color: yellow'], 
 
    ['2016-08-06T08:14:32Z', 1990.1, 'color: green'], 
 
    ]); 
 
    var options = { 
 
    chart: { 
 
     title: 'Elevation Chart', 
 
    }, 
 
    bars: 'vertical' 
 
    }; 
 
\t 
 
\t 
 
    var material = new google.charts.Bar(document.getElementById('chart_div')); 
 
    material.draw(data, options); 
 
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+1

[здесь лучшее объяснение ваших вариантов] (http://stackoverflow.com/a/36452554/5090771) - если вам нужен _actual Material chart_ ('.Bar') - см. Диаграмму 4 - просто нужно преобразовать строки в столбцы, а затем использовать опцию конфигурации« colors »... – WhiteHat

ответ

0

Причина, по которой это не работает, потому что это google.charts.Bar(...) объект, который вы создаете то, что Google называет Material Chart. Это полностью переработанная реализация API визуализации Google, отличная от того, что они называют «классическими» пакетами диаграмм, и это все еще в настоящее время в бета-версии. Здесь есть ряд связанных вопросов (см. Ниже), и кажется, что роли столбцов (как вы здесь использовали для обозначения 'color') пока не поддерживаются для . Карты материалов.

Если вы хотите использовать индивидуальные стили для каждой точки данных, вам необходимо использовать более ранний (но гораздо лучше поддерживаемый) набор инструментов Core для Google Visual Basic следующим образом. Первоначальный дизайн диаграммы немного отличается, но более широкие параметры настройки должны означать, что вы можете заставить его выглядеть так, как вы хотите!

google.charts.load('current', { 
 
    packages: ['corechart' /*, 'bar'*/ ] /* Don't need to load the bar package */ 
 
}); 
 
google.charts.setOnLoadCallback(drawDualX); 
 

 
function drawDualX() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Elevation', { 
 
     role: 'style' 
 
    }], 
 
    ['2016-08-06T08:09:47Z', 1977.4, 'color: yellow'], 
 
    ['2016-08-06T08:13:29Z', 1981, 'color: green'], 
 
    ['2016-08-06T08:14:08Z', 1986.9, 'color: yellow'], 
 
    ['2016-08-06T08:14:22Z', 1988.9, 'color: green'], 
 
    ['2016-08-06T08:14:25Z', 1989.2, 'color: green'], 
 
    ['2016-08-06T08:14:29Z', 1989.7, 'color: yellow'], 
 
    ['2016-08-06T08:14:32Z', 1990.1, 'color: green'], 
 
    ]); 
 
    var options = { 
 
    chart: { 
 
     title: 'Elevation Chart', 
 
    }, 
 
    //bars: 'vertical' /* This option isn't required for "Classic" column chart */ 
 
    }; 
 

 
    /* Create a "Classic" Google Visualization Column Chart */ 
 
    var material = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    material.draw(data, options); 
 
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Related SO question #1

Related SO question #2

0

Если вы хотите Bar Charts быть вертикальной, используйте Column Chart. Горизонтальная версия столбчатой ​​диаграммы - гистограмма.

Попробуйте

google.charts.load("current", { 
 
    packages: ['corechart'] 
 
}); 
 
google.charts.setOnLoadCallback(drawDualX); 
 

 
function drawDualX() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Elevation', { 
 
     role: 'style' 
 
    }], 
 
    ["2016-08-06T08:09:47Z", 1977.4, "color: yellow"], 
 
    ["2016-08-06T08:13:29Z", 1981, "color: green"], 
 
    ["2016-08-06T08:14:08Z", 1986.9, "color: yellow"], 
 
    ["2016-08-06T08:14:22Z", 1988.9, "color: green"], 
 
    ["2016-08-06T08:14:25Z", 1989.2, "color: green"], 
 
    ["2016-08-06T08:14:29Z", 1989.7, "color: yellow"], 
 
    ["2016-08-06T08:14:32Z", 1990.1, "color: green"], 
 
    ]); 
 

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

 
    var options = { 
 
    title: "Elevation Chart", 
 
    width: 600, 
 
    height: 400, 
 
    bar: { 
 
     groupWidth: "95%" 
 
    }, 
 
    legend: { 
 
     position: "none" 
 
    }, 
 
    }; 
 
    var material = new google.visualization.ColumnChart(document.getElementById("chart_div")); 
 
    material.draw(view, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"> 
 
</div>

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