#javascript #json #highcharts #jedox
Вопрос:
На самом деле я работаю с инструментом под названием Jedox, который позволяет мне использовать Highchart.js библиотека для создания диаграммы. Поэтому я пытаюсь сделать простую диаграмму с 2 рядами и 4 столбцами, это сгруппированная столбчатая диаграмма(кластеризованная гистограмма). Я видел на Highchart, что можно изменить цвет ряда с помощью массива «цвета», но когда я его использовал, это не сработало. Почему? Я также пытаюсь использовать colorByPoint, он работает, но это не то, что я хочу, потому что он окрашивает catogeries, но в категориях есть разные серии, и я хочу, чтобы каждая серия имела точный цвет. Как я могу это сделать ?
Прежде чем вы увидите код, вот некоторая точность: я поставил «неопределенный» в атрибуте цвета, потому что удалить эти атрибуты невозможно, поэтому я ввел их в значение по умолчанию. Обычно, когда значение установлено в «неопределенное», цвет соответствует одному из цветов в массиве «цвета».
Одна важная вещь, которую вы должны знать, прежде чем помогать мне : я не могу использовать JS, я могу использовать только JSON, вот и все.
Вот мой код:(это просто json)
"chart": {
"type": "column",
"zoomType": "xy",
"borderRadius": 0,
"events": {},
"height": 300,
"width": 400,
"backgroundColor": "#FFFFFF",
"borderWidth": 1,
"borderColor": "#D8D8D8",
"plotBackgroundColor": null,
"plotBorderWidth": 0,
"plotBorderColor": "#000100",
"spacingTop": 20
},
"plotOptions": {
"series": {
"minPointLength": 1,
"dataLabels": {
"enabled": false,
"inside": false,
"rotation": 0,
"x": 0,
"y": 0,
"style": {
"fontFamily": "Arial",
"fontSize": 9,
"color": "#366092",
"fontWeight": "normal",
"fontStyle": "regular"
}
},
"cursor": null,
"point": {
"events": {}
}
}
},
"legend": {
"symbolRadius": 0,
"backgroundColor": null,
"borderWidth": 0,
"borderColor": "#000100",
"itemStyle": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"floating": false,
"align": "center",
"verticalAlign": "bottom",
"layout": "horizontal",
"reversed": false
},
"title": {
"text": null
},
"series": [
{
"name": "Expected",
"data": [
1,
5
],
"color": "undefined",
"id": 0,
"property": "dcColumnClustered",
"type": "column",
"yAxis": 0,
"zIndex": 2,
"borderWidth": 0,
"dataLabels": {
"enabled": false
}
},
{
"name": "Current",
"data": [
2,
3
],
"color": "undefined",
"id": 1,
"property": "dcColumnClustered",
"type": "column",
"yAxis": 0,
"zIndex": 2,
"borderWidth": 0,
"dataLabels": {
"enabled": false
}
}
],
"xAxis": [
{
"id": "x_0",
"axtype": "xAxis",
"labels": {
"enabled": true,
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"autoRotation": false
},
"categories": [
"col1",
"col2"
],
"title": {
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"text": ""
},
"tickInterval": null,
"minorTickInterval": null,
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"reversed": false,
"reversedStacks": false
}
],
"yAxis": [
{
"id": "y_0",
"axtype": "yAxis",
"opposite": false,
"labels": {
"enabled": true,
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
},
"autoRotation": false
},
"gridLineWidth": 1,
"gridLineColor": "#D8D8D8",
"title": {
"text": "",
"style": {
"fontFamily": "Arial",
"fontWeight": "normal",
"fontSize": "11px",
"color": "#445862",
"fontStyle": ""
}
},
"tickInterval": null,
"minorTickInterval": null,
"reversed": false,
"reversedStacks": true
}
],
"tooltip": {
"enabled": true
},
"colors": [
"#FF0000",
"#0000FF"
]
Ответ №1:
Значение цвета по умолчанию-это undefined , а не строка "undefined" . (Если неопределенное значение не разрешено Jedox, поставьте null вместо него)
"series": [{
"color": undefined,
...
},
{
"color": undefined,
...
}
]
Живая демонстрация: https://jsfiddle.net/Черная метка/zocj5a0b/
Ссылка на API: https://api.highcharts.com/highcharts/series.column.color
Комментарии:
1. Вы совершенно правы ! Но я забыл уточнить, что Джедокс отказывается от неопределенного объекта, к сожалению, я не знаю, почему. Поэтому мы должны найти другое решение :/ ! Но большое спасибо, потому что теперь я знаю, почему это невозможно таким образом. Теперь я должен найти хороший способ исправить это.
2. Но jedox допускает нулевое значение, и оно работает с ! 🙂 ! Большое спасибо!! Отредактируйте свой ответ и добавьте «Если неопределенное значение не разрешено в Jedox, вместо него поставьте null», и я проверю ваш ответ