总价值包含高图表中的部分现值。

Question

如何使用高图表中的列值来执行某项操作？我有两个价值观：“总计”和“当前”。总金额总是较大的，因为它包含现值。我用js：链接到示例编写了一些示例

 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“的第一列应该是8，并有一部分”“，即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

​

​

根据你的评论

当我在一列中得到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：1}，{y:数组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;
})

更新的小提琴演示