highcharts从铰链基地开始 [英] highcharts start from hinges base

问题描述

我到处寻找并找不到解决方案

这里是我的代码

  jQuery（'＃chart'）。highcharts（{
 colors ：['＃f5781e'，'＃7b3186']，
导航：{
 buttonOptions：{
启用：false 
} 
}，
 ：{
启用：false 
}，
图表：{
类型：'line'，
 marginRight：0，
 marginBottom：35，
 width：700，
 height：280，
}，
 title：{
 text：''，
x：-20 // center 
 }，
字幕：{
 text：''，
x：-20 
}，
 xAxis：{
 categories：[ 1'，'2'，'3'，'4'，'5'，'6'，'7'，'8']，
 alternateGridColor：'＃f4f6f5'，
 lineColor：' ＃000000'，
 lineWidth：1，
 min：0，
}，
 yAxis：{
 title：{
 text：''
}，
 labels：{
 useHTML：true，
 format：'< span class =axis>< span class =flright> {value}<<< ; / span>אלף< / span>'
}，
 tickInterval：3，
 max：35.2，
 plotLines：[{
 value：1，
宽度：1，
颜色：'＃000'
}]，
 $ b lineColor：'＃000000'，
 
 lineWidth：1， 
分钟：0 
 }，
 plotOptions：{
系列：{
 pointStart：0 
} 
}，
工具提示：{
十字线：{
 width：2，
 color：'gray'，
 dashStyle：'shortdot'
}，
动画：true，
 valueSuffix：'，000₪' ，
 backgroundColor：'rgba（255,255,255,0.8）'，
 formatter：function（）{return'< b>'+ this.x + this.y +'< / b>';} 
}，
图例：{
启用：false 
 / ***************** 
 layout：'horizo​​ntal'，
 align：'center'，
 verticalAlign：'bottom'，
 borderWidth：0，
 floating：true，
 rtl： true，
y：15，
保证金：10，
 useHTML：true，
 itemStyle：{
 fontFamily：'Arial，Helvetica，sans-serif'，
 fontWeight：'bold'
} 
 ***** ************** / 
}，
系列：[
 {
名称：'b'，
数据：[ 0.5,1,1.5,2,2.5,3,3.5,4] 
}，
 {
 name：'< span class =abc> a< / span>' ，
 data：[4,8,12,16,20,24,28,32] 
} 
] 
}，函数（图表）{// LOGO 
 chart.renderer.image（'/ images / small_logo.png'，670，18，31，23）.add（）; 
} 
）; 
  

这里是我想要达到的图像

解决方案

你只需要改变你分钟值：

  xAxis：{
 ... 
分钟：0.5，
。 .. 
}，
  

看看这个： http://jsfiddle.net/yKHsD/

编辑：

有一个更好的解决方案。它是由类别选项造成的。你可以这样做来避免这个问题：

  var xCategories = ['1'，'2'，'3'，'4 ， '5'， '6'， '7'， '8']; 
 // ... 
 xAxis：{
 .... 
 tickmarkPlacement：'on'，
标签：{
 formatter：function（） {
 return xCategories [this.value]; 
 
}，
 startOnTick：false，
 endOnTick：false，
 minPadding：0，
 maxPadding：0，
 
 gridLineWidth：1 
}，
  

在这个例子中，不要忘记删除类别选项。这是一个例子： http://jsfiddle.net/yKHsD/1/

Is it possible to start the line from the hinges base ?

I have looked everywhere and couldnt find a solution for it

here is my code

jQuery('#chart').highcharts({            
        colors: ['#f5781e', '#7b3186'],            
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },                        
        credits: {
            enabled: false
        },            
        chart: {
            type: 'line',
            marginRight: 0,
            marginBottom: 35,
            width: 700,
            height: 280,
        },
        title: {
            text: '',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['1','2','3','4','5','6','7','8'],
            alternateGridColor: '#f4f6f5',
            lineColor: '#000000',                
            lineWidth: 1,
            min: 0,
        },
        yAxis: {                                
            title: {
                text: ''
            },
            labels: {
                useHTML : true,
                format: '<span class="axis"><span class="flright">{value}</span>אלף</span>'
            },
            tickInterval: 3,                              
            max: 35.2,                                      
            plotLines: [{
                value: 1,
                width: 1,
                color: '#000'
            }],

            lineColor: '#000000',

            lineWidth: 1,
            min: 0
        },
        plotOptions: {
            series: {
                pointStart: 0
            }
        },
        tooltip: {
            crosshairs: {
                width: 2,
                color: 'gray',
                dashStyle: 'shortdot'
            },
            animation: true,
            valueSuffix: ',000₪',
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            formatter: function() {return '<b>₪' + this.x + this.y +'</b>';}                                   
        },
        legend: {
            enabled: false
            /*****************
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0,
            floating: true,
            rtl: true,
            y: 15,
            margin: 10,
            useHTML: true,
            itemStyle: {
                fontFamily: 'Arial, Helvetica, sans-serif',
                fontWeight: 'bold'
            }
            *******************/
        },
        series: [
        {
            name: 'b',
            data: [0.5,1,1.5,2,2.5,3,3.5,4]
        },
        {
            name: '<span class="abc">a</span>',
            data: [4,8,12,16,20,24,28,32]
        } 
        ]           
    },function(chart) { //LOGO
         chart.renderer.image('/images/small_logo.png', 670, 18, 31, 23).add();       
        }
);

here is an image of what i want to achieve

解决方案

You just have to change you min value :

xAxis: {
    ...
    min: 0.5,
    ...
},

Look at this : http://jsfiddle.net/yKHsD/

EDIT :

There is a better solution. It is caused by the categories option. You can avoid this problem by doing :

var xCategories = ['1','2','3','4','5','6','7','8'];
// ...
xAxis: {
    ....
    tickmarkPlacement: 'on',
    labels: {
        formatter: function() {
            return xCategories[this.value];
        }
    },
    startOnTick: false,
    endOnTick: false,
    minPadding: 0,
    maxPadding: 0,

    gridLineWidth: 1
},

In this example, don't forget to remove the categories option. Here is an example : http://jsfiddle.net/yKHsD/1/

这篇关于highcharts从铰链基地开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！