我有一个简单的highChart,禁用了x轴标签。后来我使用以下代码在图表中添加文本
function populateDateOnChart(chartID,minRange,maxRange) {
var chart = graphChart;
if(chart) {
var panelPlyGraph = Ext.getCmp(chartID);
chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, panelPlyGraph.getHeight()-2)
.css({
color : '#666666' ,
align : 'right',
fontSize : '18pt',
fontWeight : 'normal'
}).add();
chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), panelPlyGraph.getWidth()-148, panelPlyGraph.getHeight()-2)
.css({
color : 'red',//'#666666' ,
align : 'right',
fontSize : '18pt',
fontWeight : 'normal'
}).add();
}
}
我也尝试将其添加到chart.events.load,如下所示,但仍然无法在快照上获取它。
load: function() {
graphOffsets = {};
graphOffsets.left = graphChart.axes[0].left;
graphOffsets.length = graphChart.axes[0].len;
graphOffsets.min = graphChart.axes[0].min;
graphOffsets.max = graphChart.axes[0].max;
graphOffsets.invalidMax = inValidMaxdate;
populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max);
}
我能够在HTML页面中完美地实现xAxis标签。问题是,我需要保存图形的图像。为此,我使用了canvg。出现图像,但使用chart.renderer.text.css设置的xAxis文本未出现在图像中。
xAxis labels属性很好,但它不允许我在第一个标签之前和第一个标签之后添加填充。
任何人都可以建议我使用canvg的替代方法,在保存图像时也会使用chart.render.text.css或者在代码中显示如何在highChart中定位标签。
我们没有HighChart的div,我们将它放在ExtJS面板中。这可能是标签没有出现在快照中的原因吗?
提前致谢!
答案 0 :(得分:1)
我想我知道问题出在哪里 - 正如你所说的那样,你的容器出错了。有两件事需要改变:
populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max);
- 而不是'AccumulateGraph'
使用this
:populateDateOnChart(this, graphOffsets.min, graphOffsets.max);
- 现在您将传递图表对象,而不仅仅是ID 相应地更新您的方法:
function populateDateOnChart(chart,minRange,maxRange) {
chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, chart.plotTop + chart.plotHeight - 20)
.css({
color : '#666666' ,
align : 'right',
fontSize : '18pt',
fontWeight : 'normal'
}).add();
chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), chart.plotLeft + chart.plotWidth -148, chart.plotTop + chart.plotHeight - 20)
.css({
color : 'red',//'#666666' ,
align : 'right',
fontSize : '18pt',
fontWeight : 'normal'
}).add();
}
我只是好奇 - 为什么你不能使用轴标签?例如,您可以使用xAxis.tickPositioner
仅返回第一个和最后一个值,如下所示:
xAxis: {
tickPositioner: functin(min, max) {
return [min, max];
},
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.key);
}
}
}