Highchart 柱形图

问题描述 投票:0回答:1

唯一级别 = [级别 0、级别 1、级别 2] 样本输入 = [{name:"Level 0",data:[{name:"Job A",y: 0.26},{name:"Job B",y: 0.36}]}, {name:"级别 1",data:[{name:"职位 C",y: 0.96},{name:"职位 D",y: 0.29}]}, {name:"级别 2",data:[ {name: "Job E,y: 0.96},{name: "Job F",y: 0.29}, {name: "Job G",y: 0.29}]}] 根据上面的输入需要生成柱形图我能够生成图表。但输出不同

预期输出:x轴上需要有level 0、level 1、level 2。对于级别 0 作业 A 和作业 B 需要填充,对于级别 1 作业 C 和作业 D 需要填充,对于级别 2 作业 E、作业 F 和作业 G 需要填充

我得到的输出:对于级别 0 作业 A、作业 C、作业 E 正在填充,对于级别作业 B、作业 D、作业 F 正在填充,对于级别 3 Jov G 正在填充。

在控制台中数据正确,但生成图表时我没有得到预期的输出。请帮助我。

谢谢。

预期输出:x轴上需要有level 0、level 1、level 2。对于级别 0 作业 A 和作业 B 需要填充,对于级别 1 作业 C 和作业 D 需要填充,对于级别 2 作业 E、作业 F 和作业 G 需要填充

Highchart.chart('container1', { 图表: { 类型:'列' }, x轴:{ 类别 : 独特关卡 }, 系列: 样本输入 })在此输入图片描述

javascript typescript highcharts data-binding console.log
1个回答
0
投票

要实现此类输出,您可以在 plotOptions.column 选项中启用 stacking 并将每个点的 x 位置分配给所需的 x 轴刻度。

 plotOptions: {
    column: {
      stacking: 'normal'
    }
  }

演示:https://jsfiddle.net/BlackLabel/fvkbpuLd/

API:
https://api.highcharts.com/highcharts/plotOptions.column.stacking https://api.highcharts.com/highcharts/series.column.data.x

© www.soinside.com 2019 - 2024. All rights reserved.