#javascript #highcharts
#javascript #highcharts
Вопрос:
Мне нужно динамически устанавливать разные цвета для каждого столбца в графике Highcharts. Мой график Highcharts:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos',
'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
Данные задаются таким образом:
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push(parseInt(Data[i]));
} else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);
Как я могу динамически устанавливать разные цвета для каждой точки данных в этом цикле?
Ответ №1:
Вот еще одно решение с последней версией Highcharts (в настоящее время 3.0).
Установите для параметра colorByPoint значение true и определите последовательность цветов, которую вы хотите.
options = {
chart: {...},
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#ff0000',
'#00ff00',
'#0000ff'
]
}
Вот пример, основанный на демонстрации столбца Highcharts с повернутыми метками
Комментарии:
1. обратите внимание, что это решение работает как на столбчатых диаграммах, так и на столбчатых. Просто измените ‘column’ на ‘bar’ в массиве plotOptions
2. Именно то, что мне было нужно, и его гораздо проще реализовать, чем принятый ответ. Спасибо!
3. Есть ли способ сделать что-то подобное для нескольких рядов? Не глобально? У меня есть линейная диаграмма и столбец, но я хочу, чтобы цвет моей строки отличался от того, который я установил для серии столбцов. В столбчатой диаграмме некоторые столбцы также должны быть разных цветов.
Ответ №2:
Когда вы добавляете значение в series.data, вы также можете задать цвет, используя параметры точек, например
series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });
Для получения более подробной информации о параметрах точек см. https://api.highcharts.com/class-reference/Highcharts .Точка #цвет
Комментарии:
1. Привет! Это снова я… Как я могу установить ширину столбца по данным. Например: если данные равны 23, я хочу установить ширину столбца 100 пикселей, а если данные равны 123, это будет 110 пикселей. Мне нужна эта опция для размещения данных в середине столбца.
2. Извините, я не уверен, как вы это сделаете в highcharts.
3. вы можете plotOptions-> series-> linewidth, чтобы задать ширину. Но это было бы фиксированной шириной для всех столбцов на диаграмме. Возможно, вы можете установить его, используя максимальное значение. highcharts.com/ref/#plotOptions-series—lineWidth
4. Эта ссылка на документацию не работает
5. Спасибо за этот ответ!
Ответ №3:
Попробуйте любой из этих подходов:
Подход 1:
Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });
Подход 2:
var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];
$('#bar_chart').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
colorByPoint: true,
data: [{
name: 'Blue',
y: 5.78,
color: colors[0]
}, {
name: 'Green',
y: 5.19,
color: colors[1]
}, {
name: 'Pink',
y: 32.11,
color: colors[2]
}, {
name: 'Yellow',
y: 10.04,
color: colors[3]
}, {
name: 'Purple',
y: 19.33,
color: colors[4]
}]
}]
});
Комментарии:
1. Есть ли способ установить цвет для массива разных цветов? Например, я возвращаю нужные цвета из своих данных, поэтому я хочу использовать это вместо ручной настройки, и некоторые столбцы имеют определенные цвета.
Ответ №4:
у меня были цвета из ответа API и 2 серии. вторая серия с динамическими цветами.
ниже приведен пример установки динамических цветов при сопоставлении рядов.
const response = [{
'id': 1,
'name': 'Mango',
'color': '#83d8b6',
'stock': 12.0,
'demand': 28,
},
{
id ': 2,
'name': 'Banana',
'color': '#d7e900',
'stock': 12.0,
'demand': 28,
}
];
let chartData: {
categories: [],
series: []
};
chartData.categories = response.map(x => x.name);
chartData.series.push({
name: 'Series 1',
type: 'column',
data: response.map(x => x.demand)
});
chartData.series.push({
name: 'Series 2',
type: 'column',
data: response.map(x => ({
y: x.stock,
color: x.color // set color here dynamically
}))
});
console.log('chartData: ', chartData); вы также можете прочитать больше о точке и маркере серии Highcharts