1

以下に示すチャートで、x 軸のラベルを揃えて、左側の y 軸に左をフラッシュし、右側の y 軸に右をフラッシュしたいと思います。

ここに画像の説明を入力

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
  }],

変数はデータベースから読み取られるため、x 軸の定義に使用される price_array には、この例の次の値が含まれることに注意してください。

["$60.00","$70.00","$80.00","$90.00","$100.00"]

HighCharts でこれを行う方法はありますか?

ありがとう。

バーラト

4

2 に答える 2

3

御時間ありがとうございます。ほんとうにありがとう。しかし、私はこれを理解しました。これは、投稿した元の 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 デモ:

于 2012-09-22T17:50:21.260 に答える
2

plotOptions.line.pointPlacementプロパティを設定する必要があります

pointPlacement：文字列

可能な値：null、 "on"、"between"。

縦棒グラフでは、pointPlacementが「オン」の場合、ポイントはX軸のパディングを作成しません。pointPlacementが「between」の場合、列は目盛りの間に配置されます。これは、たとえば、2つの時点の間、または極座標チャートの特定のセクターの量を視覚化する場合に役立ちます。デフォルトはnullです。

上記のAPIリファレンスでは、縦棒グラフについて言及していますが、一般的にはすべてのカテゴリチャートに適用できます。
パディングは必要ないため、次のように設定する必要があります"on"

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

起点@jsFiddleから始まるカテゴリチャート

于 2012-09-22T17:24:30.263 に答える