javascript - 总值包含 Highcharts 中当前值的一部分

Question

我该如何处理 highcharts 中的列值？我有两个值:“总计”和“当前”。总计总是更大，因为它包含当前值。我在 js Fiddle 中写了一些例子: link to example

 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'
}]

我想显示图表，其中总值为列的最大值，当前列作为总列的一部分。在我的例子中，“John Total”的第一列应该是 8，并且“John Current”的一部分是 3。在我的代码示例中，值被求和，完成值是 11。我如何解决这个问题并得到如图所示的列？ 这个系列有最大值:

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

并且这个系列有结果作为总计的一部分。约翰从总计中得到多少分:

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

因此第一列的最大值应为 8，并包括 3，如图中所示。图片上的蓝色列应该有 8，因为我们在第一个数组中有这个，而黑色列应该有 3。当我在一列中获得最大值和该值的一部分时，如何实现这一点？

Answer 1

根据您的意见

How can I acheive this when I have got Maxium value and part of this value In one column?

在这种情况下你不能使用

堆叠:'正常'

你必须使用重叠的柱形图

  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在series中，列会互相重叠)

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 更新

I want to deliver array with values under variable to data: and I want fill only Y axis without writing {y:array1}, {y:array2} for every value in array

为此，您可以使用数组映射函数来更新对象数组

$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;
})

已更新 fiddle演示