HighCharts - 如何对齐（对齐）xAxis标签左右

我想对齐x轴标签并将左侧的图像左对齐到左侧的y轴，并将右侧的图像右对齐到图中显示的y轴下面：HighCharts - 如何对齐（对齐）xAxis标签左右

enter image description here

这里是x轴和y轴的系列相关的代码：

var chart2 = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'discount_chart', 
    type: 'line' 
    }, 
    title: { 
    text: "#{title_text_sense}" 
    }, 
    xAxis: { 
    title: { text: 'Price Range - $' }, 
    categories: #{price_array}, 
    showLastLabel: true, 
    }, 
    yAxis: [{ 
    min: 0, 
    type: 'linear', 
    title: { text: 'Rate of Return - %' } 
    },{ 
    min: 0, 
    type: 'linear', 
    title: { text: 'Disc. N.Rev./Invest.(ROI)' }, 
    opposite: true 
    }],

注意，变量从数据库中读出，以便使用该price_array定义x轴包含这个例子的值：

[ “$ 60.00”， “70.00 $”， “$ 80.00”， “90.00 $”， “$ 100.00”]

有没有办法在HighCharts做到这一点？

谢谢。

巴拉特

来源

2012-09-21 Bharat

我不知道如果这个问题是非常明显的，和的jsfiddle将不胜感激，以及 –

你好面颊，感谢你的回应。这里是一个jsFiddle链接：http://jsfiddle.net/rv46j/1/ – Bharat

我想要做的是获得$ 60.00左对齐y轴0是因此消除图表行开始的空白空间在左边。同样，$ 100.00应该是图形切断的位置，而不是在图形终止点$ 100.00处留下空的空间。希望澄清我的问题。 – Bharat

感谢您的时间。对此，我真的非常感激。但我明白了这一点。这是我发布的原始jsFiddle链接的一个分支。它正是我想要做的。基本上，我删除了xAxis中的类别选项，然后使用xAxis的自定义标签格式化程序;它为我做了诡计。下面是

我Highcharts JavaScript代码来做到这一点：

var x_labels = ["$60.00","$70.00","$80.00","$90.00","$100.00"]; 
var chart2 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'discount_chart', 
     type: 'line' 
    }, 
    title: { 
     text: "Big Wells 2 Economic Sensitivity Plot" 
    }, 
    xAxis: { 
     title: { 
      text: 'Price Range - $' 
     }, 
     labels: { 
      formatter: function() { 
       return x_labels[this.value]; 
      } 
     }, 
     showLastLabel: true, 
    }, 
    yAxis: [{ 
     min: 0, 
     type: 'linear', 
     title: { 
      text: 'Rate of Return - %' 
     }}, 
    { 
     min: 0, 
     type: 'linear', 
     title: { 
      text: 'Disc. N.Rev./Invest.(ROI)' 
     }, 
     opposite: true}], 
    tooltip: { 
     formatter: function() { 
      var seriesName = { 
       'Rate of Return': 'ROR', 
       'Return on Investment': 'ROI' 
      }[this.series.name]; 
      return '<b>' + this.series.name + '</b><br/>Price = ' + x_labels[this.x] + ', ' + seriesName + ' = ' + (Math.round(this.y * 1000)/1000); 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -20, 
     y: 100, 
     borderWidth: 0 
    }, 
    plotOptions: { 
     series: { 
      marker: { 
       enabled: false, 
       states: { 
        hover: { 
         enabled: true 
        } 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: 'Rate of Return', 
     color: 'red', 
     data: [-4.608072102337354, -0.738803860865155, 4.653294970652549, 8.92228974293352, 14.025752639875485], 
     pointStart: 0}, 
    { 
     name: 'Return on Investment', 
     color: 'blue', 
     data: [0.5863077142857144, 0.7098245714285715, 0.8340802857142857, 0.9587922857142858, 1.083803], 
     pointStart: 0, 
     yAxis: 1}] 
});

jSFiddle Demo of above code to fork:

来源

2012-09-22 17:50:21 Bharat

先生，我很抱歉，为什么你要通过使用格式化程序并在图表选项之外维护一组类别来完成这一任务，当它可以像''pointPlacement：'on'一样轻松完成？ –

这是一个BRILLIANT解决方案，它可以帮助我在使用类别与其他类型数据时在我的坐标轴中看到的奇怪偏移量。非常感谢你！ –

应设置plotOptions.line.pointPlacement属性

pointPlacement：字符串

可能值：空， “上”， “间”。

在柱状图中，当pointPlacement为“on”时，该点不会创建任何对X轴的填充。如果pointPlacement为“之间”，则的列将在刻度之间进行布局。这对于例如用于可视化两个时间点之间的数量或在极坐标图的某个特定的扇区中是有用的。缺省为空。

尽管上面的API参考文献提到它适用于柱状图，它一般适用于任何类别图表。
既然你不想要填充，你需要将其设置为"on"

plotOptions: { 
    series: {    
     pointPlacement: "on" 
    } 
},

Category Charts starting from origin @ jsFiddle

来源

2012-09-22 17:24:30

HighCharts - 如何对齐（对齐）xAxis标签左右

回答

相关问题