javascript - highcharts grouping with overflow

Question

I made highcharts for petrol tank(credit prepayment)

I want to make that each line should start from the beginning of the bar instead of grouping(adding) at the end.(I don't need to have sum of all data)

Thanks.

    ![var options = {
                chart: {
                    type: 'bar',
                    height: 300,
                    width:420
                },
                title: {
                    text: 'Prepayment'
                },
                yAxis: {
                    gridLineColor: '#eee',
                    title: {
                        text: 'Prepayment'
                    }
                },
                xAxis: {
                    categories: \['Credit'\],
                    labels: {
                        step: 0,
                        rotation: -45,
                        align: 'right'
                    }
                },
                legend: {
                    enabled: true
                },
                tooltip: {
                    shared: true,
                    crosshairs: true
                },
                plotOptions: {
                     series: {
                        stacking: 'normal'
                    }
                },
                credits: {
                    enabled: false
                },
                series: \[{
                    color:'#89C35C',
                    name: 'Current Credit',
                    data: \[10\]                }, {
                    color:'#FFD801',
                    name: 'Warning Threshold',
                    data: \[5\]             }, {
                    color:'#E42217',
                    name: 'Cut-Off Threshold',
                    data: \[1\]             }\],
            };
 $('#container').highcharts(options);][1]

Example: http://jsfiddle.net/2se5q/

Answer 1

您将在此链接上找到所有解释http://api.highcharts.com/highcharts 如果您只删除“plotOptions:”来回答您的问题，您将不会发现超过一行图形的总和，而是从 0 开始.

这里：http: //jsfiddle.net/2se5q/3/

 plotOptions: {
    series: {
    stacking: 'normal'
 }

Answer 2

我是这样设计的，其中 type = area

http://jsfiddle.net/2se5q/4/

    var options = {
                chart: {
                    type: 'area',
                    height: 300,
                    width:420
                },
                title: {
                    text: 'Prepayment'
                },
                yAxis: {
                    gridLineColor: '#eee',
                    title: {
                        text: 'Prepayment'
                    }
                },
                xAxis: {
                    categories: ['Credit'],
                    labels: {
                        step: 0,
                        rotation: -45,
                        align: 'right'
                    }
                },
                legend: {
                    enabled: true
                },
                tooltip: {
                    shared: true,
                    crosshairs: true
                },
                plotOptions: {
                     series: {
                        stacking: 'normal'
                    }
                },
                credits: {
                    enabled: false
                },
                series: [{
                    color:'#89C35C',
                    name: 'Current Credit',
                    data: [10,10]               }, {
                    color:'#FFD801',
                    name: 'Warning Threshold',
                    data: [5,5]             }, {
                    color:'#E42217',
                    name: 'Cut-Off Threshold',
                    data: [1,1]             }],
            };
 $('#container').highcharts(options);