Question

我一直在为网站寻找一个像样的图表解决方案，我觉得HighCharts看起来很合适。文档似乎相当不错，但有一些奇怪的事情，我需要一些帮助。

我选择了6个标签，但插件输出7 标记。
我正在尝试仅在x轴上显示标签 y轴上没有任何内容，但图表正在输出标签 y轴，而不是在x轴上显示标签。
有没有办法隐藏传说？我找不到这个选项。

以下代码：

$(function () { 
     $('#chart-data').highcharts({
          chart: {
                type: 'bar'
          },
          title: {
                text: ''
          },
          xAxis: {
                categories: ['Pre-Clinical', 'Phase I', 'Phase II', 'Phase III', 'Phase IV', 'Launch',]
          },
          yAxis: {

          },
          plotOptions: {
                line: {
                     dataLabels: {
                          enabled: true,
                          align: 'top'
                     },
                     enableMouseTracking: false
                }
          },                
          series: [{
                name: 'AMG 319',
                data: [6, 0, 0, 0, 0]
          }, {
                name: 'BAY 80-6946',
                data: [0, 5, 0, 0, 0]
          }, {
                name: 'GDC-0980 (RG7422)',
                data: [0, 0, 4, 0, 0]
          }, {
               name: 'Buparlisib (BKM120)',
               data: [0, 0, 0, 3, 0]
          }, {
               name: 'CUDC-907',
                data: [0, 0, 0, 0, 2]
          }, {
               name: 'GDC-09',
                data: [0, 0, 0, 0, 0]
          }]
     });
});

Answer 1

按照要求：

“类别”不确定标签数量，仅确定内容。如果数据超出类别数量，则任何其他点将以数字标记。要指定与类别标签对应的x值，请使用类别数组索引（从0开始）作为x值。
在水平条形图中，x轴和y轴交换 - 它们只是在侧面转动柱形图。
您可以为图例设置“enabled: false”：http://api.highcharts.com/highcharts#legend.enabled

Answer 2

我不确定为什么这些东西不适合你，但是启用了一个图例：false隐藏图例，与标签相同。但我想知道你是否对x / y轴感到困惑，因为这是条形图而不是柱形图。至于你的6对7标签，我再次认为这是方向让你困惑，你没有为两个轴指定标签，因此Highcharts使用你给出的数据为未指定的轴制作标签。检查一下，快速完成但希望有所帮助： http://jsfiddle.net/T78R9/7/

// HighCharts Plugin
$(function () { 
 $('#container').highcharts({
      chart: {
            type: 'column'
      },
      title: {
            text: ''
      },
      xAxis: {
          labels: {enabled:false},
            categories: ['Pre-Clinical', 'Phase I', 'Phase II', 'Phase III', 'Phase IV', 'Launch',]
      },
      yAxis: {

      },
      plotOptions: {
            line: {
                 dataLabels: {
                      enabled: true,
                      align: 'top'
                 },
                 enableMouseTracking: false
            }
      },                
      series: [{
            name: 'AMG 319',
            data: [6, 0, 0, 0, 0]
      }, {
            name: 'BAY 80-6946',
            data: [0, 5, 0, 0, 0]
      }, {
            name: 'GDC-0980 (RG7422)',
            data: [0, 0, 4, 0, 0]
      }, {
           name: 'Buparlisib (BKM120)',
           data: [0, 0, 0, 3, 0]
      }, {
           name: 'CUDC-907',
            data: [0, 0, 0, 0, 2]
      }, {
           name: 'GDC-09',
            data: [0, 0, 0, 0, 0]
      }],
                            legend: { enabled: false}                      
 });
});

Highcharts.js - 切换标签轴和隐藏图例

2 个答案: