Question

我正在尝试创建一个包含大量数据的高清图。下面是我为编写它而编写的代码。但不知何故，在X轴上并没有显示所有类别。随附的是小提琴

$(function() {
  Highcharts.chart('containerSDRangeDOJ', {
    chart: {
      type: 'bar',
      marginLeft: 150,
      marginBotton: 50
    },
    legend: {
      y: -20
    },
    title: {
      text: "Top Source-Destination",
      align: "center"
    },
    subtitle: {
      text: 'Some link to download this data'
    },
    xAxis: {
      type: 'category',
      title: {
        text: null
      },
      min: 1,
      max: 15,
      scrollbar: {
        enabled: true
      },
      tickLength: 1,

    },
    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: 'Oops Count',
        align: 'middle'
      }
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false

    },
    series: [{
      name: 'Count',
      data: [
        ["Bangalore to Chennai", 40],
        ["Bangalore to Madurai", 55],
        ["Bangalore to Chennai", 40],
        ["Bangalore to Chennai", 40],
        ["Bangalore to Chennai", 40]
      ]
    }]
  });
})

Answer 1

有两种不同的事情正在影响这一点。

1）您正在将x轴min设置为1。第一个类别从0开始，因此您告诉图表跳过它。

2）您的第3，第4和第5个数据点都列为同一类别，因此它们将所有数据点与轴上的相同类别相关联。它不会重复类别 - 如果您在数据点中指定它们，它们必须是唯一的。

例如：

  xAxis: {
    type: 'category',
    min: 0,
    max: 14
  },
  series: [{
      name: 'Count',
      data: [
        ["Bangalore to Chennai", 40],
        ["Bangalore to Madurai", 55],
        ["Bangalore to Chennai2", 40],
        ["Bangalore to Chennai3", 40],
        ["Bangalore to Chennai4", 40]
      ]
    }]

更新了小提琴，x轴min设置为0，类别名称已编辑：

https://jsfiddle.net/jlbriggs/78yesztL/20/

Answer 2

@jlbriggs提到的问题是

我添加了第二个点（唯一名称）的黑客，以在xAxis中显示正确的标签

fiddle

尝试使用图表加载事件来检查数据中的每个名称。如果当前名称与之前的名称匹配，则为其添加一个空格（名称长度从前一个名称改变，并且它变为不同的名称但看起来相同）并形成新数组并使用此更新图表系列阵列。

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  public transform(values: any[], filter: string): any[] {
    if (!values || !values.length) return [];
    if (!filter) return values;
    // Filter items array, items which match will return true
    return values.filter(v => v.email.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
  }
}

我个人认为你应该使用这个例子Fiddle

并非所有类别都显示在条形图中

2 个答案: