2

縦棒グラフと、グラフ全体の線画を組み合わせたものがあります。チャートコンテナの幅を357px未満の値に減らすと、水平線は全幅ではなく半分だけ描画されます。

chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chartcontainer',
                defaultSeriesType: 'column',
                borderRadius:0,
                marginRight: 22,
                marginBottom: 140
            },
            title: {
                text: 'test norm',
                align: 'left'
            },
            xAxis: [{
                title: {
                    text: 'x',
                    style: {

                    }
                },
                categories: ['2008','2009','2010','2011','2012'],
                labels: {
                    style: {
                    }
                }
            },
            { //secondary xAxis for range and norm values
              gridLineWidth: 0, 
              labels:{
                  enabled:false
              },
              lineWidth:0,
              tickWidth:0,
              opposite: true,
              minPadding:0,
              maxPadding:0
            }
            ],
            yAxis: {
                title: {
                    text: 'y',
                    style: {
                    }
                },
                labels: {
                    style: {
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'bottom',
                width:700,
                borderRadius: 0,
                shadow:false,
                floating:true,          
                borderWidth: 0                                  
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            tooltip: {
                borderRadius: 0,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: false,
                style: {
                    font: 'bold 11px Arial, Verdana, sans-serif',
                    fontWeight: 'bold'
                },                          
                formatter: function() {
                        return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
                }
            },
            plotOptions: {
                column: {
                    dataLabels: {
                         enabled: false
                    },
                    shadow: false
                }
            },
            series: [{ name: 'A', shadow: false, data: [8,2,8,4,6] },{ name: 'B', shadow: false, data: [1,4,2,3,4] },{ name: 'C', shadow: false, data: [4,16,8,12,16] },{ name: 'E', shadow: false, data: [8,4,6,8,2] },{
type:'line',
name:'Norm',

data:[
    { 
        y:10.000000,            
        x:0.000000,
        dataLabels: {
            enabled: false,
            align: 'left',
            formatter:function(){return 'Norm: ' + this.y;},
            style: {fontWeight:'bold'}
        },

    },
    {
        y:10.000000,
        x:1.000000,
        dataLabels: {
            enabled: true,
            align: 'right',
            formatter:function(){return 'Norm: ' + this.y;},
            style: {fontWeight:'bold'}
        },
    }
],
color: '#01A1EB',
lineWidth:1,
dashStyle:'Solid',
shadow: {
    opacity:0.1
},
enableMouseTracking:false,
marker:{enabled:false},
xAxis:1,
showInLegend: true

}]}）;

ここで私のjsfiddleの例を参照してください：完全に描かれた線：

http://jsfiddle.net/ramon_ackermann/WwSbT/7/

途中の行：http： //jsfiddle.net/ramon_ackermann/WwSbT/8/

これを引き起こす可能性のあるアイデアはありますか？

乾杯。

4

2 に答える 2

2

代わりに、y軸にプロットラインを使用してください：http：//jsfiddle.net/paranoir/WwSbT/9/

plotLines: [{
    color: '#FF0000',
    width: 1,
    value: 10
}]
于 2013-02-27T09:13:40.177 に答える
1

プロットラインも私の好みのオプションです。

ただし、何らかの理由でシリーズにする必要がある場合は、次のように行うことができます。

1）ラインの最小x値を-0.5に設定し、最大x値を4.5に設定します。2）xAxisの最小値を0に設定し、最大値を4に設定します。3）2番目のx軸を忘れます。

http://jsfiddle.net/jlbriggs/WwSbT/10/

for the x axis:
xAxis: [{
  min:0,
  max:4,
}]

and then in the data:
...
  y:10.000000,            
  x:-0.5,
...
  y:10.000000,
  x:4.5,

2番目のx軸は問題の一部であるように見えます。ノルム系列を非表示にしてから再表示すると、プロット領域が適切に塗りつぶされます。

于 2013-02-27T14:20:27.600 に答える