gpt4 book ai didi

javascript - 更改 Google 堆积条形图颜色( Material 条形图)

转载 作者:数据小太阳 更新时间:2023-10-29 04:47:42 26 4
gpt4 key购买 nike

var data = google.visualization.arrayToDataTable(stats_data);

var options = {
width: 1400,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
bars: 'vertical',
colors:['#999','#346ac9', '#279423', '#fc9826'],
};

var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));

我有一个堆叠条形图,我希望每种颜色都不同(灰色、蓝色、绿色、橙色)。但是,分区的颜色在多个亮度中只取第一种颜色(灰色)。

enter image description here

我也在我的选项中试过这个:

series: [
{color: '#999'},
{color: '#346ac9'},
{color: '#279423'},
{color: '#fc9826'}
]

如何让每个系列都有不同的颜色?

最佳答案

在最初提出问题时,Material Bar Chart 可能还不支持堆叠条形图的自定义颜色。

今天,作为颜色对象数组series 配置选项似乎工作正常。请参阅下面示例中的 colors 变量。

示例代码:

const data = [
['Sector', 'High', 'Medium', 'Low' ],
['Agriculture', 18, 9, 29],
['Education', 2, 14, 10],
['Healthcare', 4, 6, 41],
['Manufacturing', 36, 10, 3]
];
const colors = [
{ color: 'indianred' }, //high
{ color: 'khaki' }, //medium
{ color: 'seagreen' }, //low
];

const drawChart = () => {
const options = {
chart: { title: 'Risk by sector' },
legend: { position: 'top' }, //not yet supported
bars: 'horizontal',
stacked: true,
series: colors
};
const chartData = google.visualization.arrayToDataTable(data);
const elem = $('figure#health-chart')[0];
const chart = new google.charts.Bar(elem);
chart.draw(chartData, options);
};

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

结果图表: Bar Chart

摆弄代码:
https://jsfiddle.net/p8bnfe2h

配置选项

series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.

文档:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options

关于javascript - 更改 Google 堆积条形图颜色( Material 条形图),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29935357/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com