Блог

Главная - Вопросы по программированию - как отобразить data json в 2 разных верхних строках диаграммы

как отобразить data json в 2 разных верхних строках диаграммы

javascript #jquery #json #highcharts #label

#javascript #jquery #json #верхние диаграммы #метка

Вопрос:

я пытаюсь отобразить данные в столбцах верхнего уровня.. в столбцах верхней диаграммы должно быть всего 2 бара, и в обоих барах были данные..

итак, вот объяснение…

у меня есть гистограмма 2 категорий, и обе категории имеют подкатегории.

чтобы было понятно, вот данные категорий :

первая категория :

scategori 1-1, scategori 2-1,scategori3-1

и вот вторая категория :

scategori 1-2,scategori 2-2,scategori 3-2,scategori 4-2,scategori 5-2,scategori 6-2

и вот пример, которого я хочу достичь :

введите описание изображения здесь

и оба данных поступают из этих данных json :

 [{
"name": "scategories 1-1",
"color": "#1E4585",
"data": [
  {
    "y": 40,
    "total": 40,
    "data": "1",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 2-1",
"color": "#600AB5",
"data": [
  {
    "y": 40,
    "total": 40,
    "data": "2",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 3-1",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 1-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 2-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 3-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 4-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 5-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 6-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},]

и когда я попробовал использовать json данных выше для скрипта highchart. результат не похож на то, что я хочу..

вот результат моей попытки:

введите описание изображения здесь

может ли кто-нибудь помочь мне достичь того, чего я хочу достичь, или сделать результат таким же, как то, что хочет Ico

Комментарии:

1. Привет @riyan193, чего именно ты хочешь достичь? Должны ли ряды с накоплением быть представлены одним столбцом и легендой? Не могли бы вы воспроизвести свой текущий этап в jsfiddle? Вы можете начать с: jsfiddle.net/BlackLabel/6m4e8x0y

2. привет, ppotaczek, спасибо за ответ, я модифицирую для вас пример из jsfiddle.net/p0vnxsfe и можете ли вы дать наилучшую практику чувак для диаграммы изображений я даю изображение сверху спасибо

3. Спасибо за пример! Тем не менее, я все еще не совсем уверен, чего вы хотите достичь. Не могли бы вы описать желаемый результат более подробно?

4. привет @ppotaczek, извините, мой пример неясен, я хочу создать второе изображение диаграммы, которое я прикрепляю в первом вопросе. у меня есть 1 метка, которая является национальной, и у меня есть 2 сложенные столбчатые диаграммы и более 1 легенды, пример метки national имеет первые категории столбцовой диаграммы 1-1 до категорий 3-1 и вторые категории столбцовой диаграммы 1-2 докатегории 6-2, можете ли вы предложить для примера код js и json? я надеюсь, что это понятно

5. привет, я редактирую свое достижение, о котором идет речь

Ответ №1:

Вам нужно использовать stack свойство и создать два стека. Пример:

 var series = [{
        stack: 'A',
        ...
    },
    {
        stack: 'B',
        ...
    }
];

Живая демонстрация: http://jsfiddle.net/blackLabel/0fbrac5g/

Ссылка на API: https://api.highcharts.com/highcharts/series.column.stack

Метки: