Highcharts 百分位数分布图问题

Question

谁能帮我解决我在下面的 Highcharts 图表中遇到的问题：

My sample Percentile distribution graph Done with Highcharts

我正在尝试使用 Highcharts 设置百分位数分布图，但我遇到了与数据无关的水平轴问题。

目标是我的图表如下所示： Excel percentile distribution graph

例如，我有一个包含两列（DL_speed 和运算符）的 Excel 数据 table，运算符列包含 4 个运算符（运算符 1、运算符 2、运算符 3） , 运营商 4). 使用 Excel 我生成了一个主元 table，它为 DL_Speed 提供一列，为每个运算符提供 4 列，其值是累积百分比（从 0% 到 100%）。 Excel Pivot table with cumulative percent

开头的table是这样的：Excel table

下面是我写的代码示例：

$(document).ready(function() {
  var options = {
    chart: {
      renderTo: 'container',
      type: 'line'
    },
    colors: [
      '#8b008b',
      '#1d98e0',
      '#ff8c00',
      '#f71d1d',
    ],
    title: {
      text: 'DL Throughtput Distribution (Mbps)',
      style: {
        color: 'Black',
        fontSize: '13px'
      }
    },

    subtitle: {
      style: {
        color: 'Black',
        fontSize: '11px'
      }
    },
    xAxis: {
      min: 0,
      max: 25000,
      tickInterval: 5000,
      minorTickInterval: 'auto',
      startOnTick: true,
      endOnTick: true

    },
    yAxis: {
      min: 0,
      max: 100,
      tickInterval: 10,
      labels: {
        format: '{value}%'
      },
      title: {
        enabled: false
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          this.x + ': ' + this.y;
      }
    },
    legend: {
      itemStyle: {
        fontSize: '11px'
      }
    },
    plotOptions: {
      series: {
        stacking: 'percent',
        marker: {
          enabled: false
        }
      }
    },
    series: [{
      name: 'Operator 1',
      data: [112, 207, 248, 356, 458, 555, 5690, 5890, 8220, 12500, 15690, 20000, 24000]
    }, {
      name: 'Operator 2',
      data: [100, 219, 411, 455, 545, 625, 7000, 9250, 11580, 14880, 19990, 22000]
    }, {
      name: 'Operator 3',
      data: [150, 228, 340, 469, 555, 569, 7030, 8990, 11990, 15690, 20010, 23200]
    }, {
      name: 'Operator 4',
      data: [109, 204, 232, 357, 428, 554, 6690, 7910, 932, 13000, 14990, 21000, 23000]
    }]
  }

  chart = new Highcharts.Chart(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

Answer 1

请记住，要使图表能够正确显示，您需要提供格式正确并被 Highcharts 理解的数据。您可以在此处找到有关允许使用哪些数据格式的文档： https://api.highcharts.com/highcharts/series.line.data

如果您有其他数据，您需要先按照您希望的显示方式对其进行更改或格式化。在这里您可以看到解析 JSON 数据的简单示例： https://jsfiddle.net/BlackLabel/fsvrmd3u/

在您的情况下，有必要为 X 轴指定准确的正确值，为 Y 轴指定百分比：https://jsfiddle.net/BlackLabel/s9pru70v/

  yAxis: {
    labels: {
      format: '{value}%'
    }
  },

  series: [{
    data: [
      [0, 10],
      [1, 20],
      [2, 80]
    ]
  }]

Highcharts 百分位数分布图问题

Highcharts Percentile Distribution Graph issue

javascript

excel

highcharts