Question

我有一个需要在其中显示显示发布进度的条形图的要求。我需要在其中整体显示该版本下的每个子版本。

我的x轴Json看起来像：https://jsonblob.com/b9dff016-2f79-11e9-9080-15acf9a0cdee

我的y轴Json看起来像：https://jsonblob.com/87f94869-2f79-11e9-9080-bd5614234be8

当我尝试只绘制一个条形图时，这可以正常工作。但是当我像上面的json中所述发送两个小节的数据时，它显示“无数据可显示”

Highchart：

Highcharts.chart('chartDiv_'+widgetId, {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Project Progress'
    },
    xAxis: {
        categories: x_axis
    },
    yAxis: {
        min: 0,
        max: 100,
        reversedStacks : false,
        labels: {
            formatter: function() {
                return this.value+"%";
            }
        },
        title: {
            text: 'Percentage'
        }
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} %</b><br/>',
        shared: false
    },
    legend: {
        enabled: false,
        reversed: false
    },
    plotOptions: {
        series: {
            stacking: 'percentage',
            pointWidth: 60,
            dataLabels: {
                enabled: true,
                format : '{series.name}',
                style : {
                    color: '#DCDCDC',
                    fontSize: '13px',
                    fontWeight: 'pointer',
                    textOutline: '0px contrast',
                    textShadow: 'none'
                }
            }
        }
    },
    series: y_axis
});

Answer 1

您的y_axis（或系列）配置错误。

您具有以下设置：

series: [
  [
    {datapoint 1 bar 1},
    {datapoint 2 bar 1},
    ...
  ], 
  [
    {datapoint 1 bar 2},
    {datapoint 2 bar 2},
    ...
  ]
]

Highcharts仅以以下方式接受系列定义：

series: [
  {datapoint 1 bar 1},
  {datapoint 2 bar 1},
  ...,
  {datapoint 1 bar 2},
  {datapoint 2 bar 2},
  ...
]

或者，您可以执行以下操作：

series: [
  {datapoint 1-N bar 1},
  {datapoint 1-N bar 2},
  ...
]

也就是说，您可能想做的是：

series: [
  {
    name: "1-PI-1",
    data: [{x: 0, y: 20.25}] //x: 0 = first category
  }, {
    name: "1-PI-2",
    data: [{x: 0, y: 30.38}]
  }, 
  ..., 
  {
    name: "1-PI-1",
    data: [{x: 1, y: 36.59}]  //x: 1 = second category
  },
  ...
]

在这里，x: 0指的是第一类别，x: 1指的是第二类别。

var y_axis = 
  [{
    "name": "1-PI-1",
    "data": [{x: 0, y: 20.25}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 0, y: 30.38}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": "1-Alpha",
    "data": [{x: 0, y: 46.84}],
    "color": "#9933ff",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 0, y: 2.53}],
    "color": "#4d4d4d",
    "index": 5
  },
  {
    "name": "1-PI-1",
    "data": [{x: 1, y: 36.59}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 1, y: 34.15}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": " ",
    "data": [{x: 1, y: 2.44}],
    "color": "#4d4d4d",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 1, y: 26.83}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 5
  }]

var x_axis = ["Project 1", "Project 2"]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Project Progress'
  },
  xAxis: {
    categories: x_axis
  },
  yAxis: {
    min: 0,
    max: 100,
    reversedStacks: false,
    labels: {
      formatter: function() {
        return this.value + "%";
      }
    },
    title: {
      text: 'Percentage'
    }
  },
  credits: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} %</b><br/>',
    shared: false
  },
  legend: {
    enabled: false,
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'percentage',
      pointWidth: 60,
      dataLabels: {
        enabled: true,
        format: '{series.name}',
        style: {
          color: '#DCDCDC',
          fontSize: '13px',
          fontWeight: 'pointer',
          textOutline: '0px contrast',
          textShadow: 'none'
        }
      }
    }
  },
  series: y_axis
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

工作中的JSFiddle： https://jsfiddle.net/ewolden/rzwkeysm/15/

bar.data上的API： https://api.highcharts.com/highcharts/series.bar.data

多个条形图的高图堆积条形图

1 个答案: