0

x 軸のラベルが無効になっている単純な highChart があります。後で、次のコードを使用してチャートにテキストを追加しています

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 ラベル属性は問題ありませんが、最初のラベルの前と最初のラベルの後にパディングを追加することはできません。

画像の保存中にも chart.render.text.css を取る canvg の代替案、またはコードに示されているようにラベルを highChart に配置する方法を提案してください。

HighChart の div はありません。ExtJS パネルに配置しています。これは、ラベルがスナップショットに表示されない理由ですか?

前もって感謝します！

4

1 に答える 1

1

どこに問題があるかはわかっていると思います-あなたが提案したように、間違ったコンテナを取得しています。変更する 2 つの点:

  • 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);
    }
  }
}
于 2015-09-29T10:03:19.927 に答える