Общая стоимость содержит часть текущей стоимости в старших графиках

1

как я могу что-то сделать с моим значением столбцов в highcharts? У меня есть два значения: "total" и "current". Сумма всегда больше, потому что она содержит текущее значение. Я пишу пример в js Fiddle: ссылка на пример

 series: [{
    name: 'John Total',
    data: [8, 9, 4, 7, 6],
    stack: 'male'
}, {
    name: 'John Current',
    data: [3, 4, 3, 2, 5],
    stack: 'male'
}, {
    name: 'Jane Total',
    data: [8, 5, 9, 8, 9],
    stack: 'female'
}, {
    name: 'Jane Current',
    data: [1, 0, 4, 4, 3],
    stack: 'female'
}]

Я хочу отобразить диаграмму, где общее значение - максимальное значение столбца и текущего столбца как часть общего столбца. В моем примере в первом столбце "Джон Всего" должно быть 8 и иметь часть "Джон-ток", которая равна 3. В моем примере кода значения суммируются и заканчиваются значением 11. Как я могу исправить это и получить столбцы, как на картинке? Эта серия имеет максимальные значения:

series: [{
    name: 'John Total',
    data: [8, 9, 4, 7, 6],
},

И эта серия имеет результаты как часть общего. Сколько очков Джон получает от Total:

{
    name: 'John Current',
    data: [3, 4, 3, 2, 5],
    stack: 'male'
},

Поэтому первый столбец должен иметь максимальное значение 8 и включать 3, как на картинке. Синяя колонка на картинке должна иметь 8, потому что мы имеем это в первом массиве, а черный столбец должен иметь 3. Как я могу получить это, когда у меня есть значение Maxium и часть этого значения. В одном столбце? Изображение 174551

  • 0
    Каков ожидаемый результат?
  • 0
    Я ожидаю, что мои столбцы имеют максимальное значение 'John Total' и 'Jane Total' и содержат стек 'John Current' для 'John Total' и стек 'Jane Current' для 'Jane Total'. Таким образом, первый столбец, например, будет иметь 8 и содержать 3. Теперь для первого столбца значение как бы суммируется с текущим и имеет 11. Мне нужно иметь максимум 8 и содержать 3 в нижней части.
Показать ещё 7 комментариев
Теги:
angular
highcharts

1 ответ

1
Лучший ответ

Изображение 174551

Согласно вашему комментарию

Как я могу получить это, когда у меня есть значение Maxium и часть этого значения. В одном столбце?

В этом случае вы не можете использовать

stacking: 'normal'

Вы должны использовать перекрывающиеся диаграммы столбцов

  plotOptions: {
    column: {
      grouping: false,
      groupPadding: 0.4 //added padding to give some spacing between column
    }, 
  },

И серии с

series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];

здесь x значение представляет позицию столбца (если вы не определяете x последовательно, столбец будет перекрывать друг друга)

Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],

  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  plotOptions: {
    column: {
      grouping: false,
      groupPadding: 0.4

    },

  },

  series: [{
    name: 'Jane Total',

    data: [{
      y: 8,
      x: 0.20
    }, {
      y: 5,
      x: 1.20
    }, {
      y: 9,
      x: 2.20
    }, {
      y: 8,
      x: 3.20
    }, {
      y: 9,
      x: 4.20
    }, ]
  }, {
    name: 'Jane Current',

    data: [{
      y: 1,
      x: 0.20
    }, {
      y: 0,
      x: 1.20
    }, {
      y: 4,
      x: 2.20
    }, {
      y: 4,
      x: 3.20
    }, {
      y: 3,
      x: 4.20
    }, ]
  }, {
    name: 'John Total',
    data: [8, 9, 4, 7, 6],
  }, {
    name: 'John Current',
    data: [3, 4, 3, 2, 5],
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Обновление согласно OP

Я хочу доставить массив со значениями под переменной в данные: и я хочу заполнить только ось Y без записи {y: array 1 }, {y: array 2 } для каждого значения в массиве

Для этого вы можете использовать функцию отображения массива для обновления массива объекта

$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
    el={y:el,x: i+0.20};
  return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
    el={y:el,x: i+0.20};
  return el;
})

Обновленная демонстрация скриптов

  • 0
    Да, я думаю, что это так! Спасибо Тебе человек. Не могли бы вы сказать мне, как я могу сделать мою ось Y из серии. У меня есть $ scope..myData = array [1,2,3,4]. Как я могу поместить свой массив в ось Y серии.data?
  • 0
    добавить вам образец скрипки angularjs. Какая у тебя актуальная проблема? Вы столкнулись с проблемой при создании таких данных, как [{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню