Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 样式图表x和y轴_Javascript_Jquery_Css_Highcharts - Fatal编程技术网

Javascript 样式图表x和y轴

Javascript 样式图表x和y轴,javascript,jquery,css,highcharts,Javascript,Jquery,Css,Highcharts,我被一个问题困住了,找不到进一步的办法。我正在尝试使用highcharts制作图表。但无法在左侧显示右侧的百分比值,并将底部和左侧的行稍微上移一点,使它们看起来像第一个屏幕。底部标签下面的勾号也有同样的问题,它们似乎无法移动到顶部,因此它们将覆盖中间的底线 必须是这样的: 这就是我到目前为止所做的: 下面是我的代码的外观: 和highcharts设置: $j('.investor-calculator .chart-container .chart').highcharts({ ti

我被一个问题困住了,找不到进一步的办法。我正在尝试使用highcharts制作图表。但无法在左侧显示右侧的百分比值,并将底部和左侧的行稍微上移一点,使它们看起来像第一个屏幕。底部标签下面的勾号也有同样的问题,它们似乎无法移动到顶部,因此它们将覆盖中间的底线

必须是这样的:

这就是我到目前为止所做的:

下面是我的代码的外观:

和highcharts设置:

$j('.investor-calculator .chart-container .chart').highcharts({
    title: {
        text: '',
        x: -20 /*center*/
    },
    background: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, 'rgb(96, 96, 96)'],
            [1, 'rgb(16, 16, 16)']
        ]
    },
    subtitle: {
        text: '',
        x: -20
    },
    xAxis: {
        categories: ['Янв', 'Мар', 'Май', 'Июл', 'Сен', 'Ноя'],
        tickmarkPlacement: 'on',
        tickColor: '#d2d2d2',
        gridLineColor: '#eee',
        tick: false
    },
    yAxis: {
        title: null,
        tickPosition: 'inside',
        gridLineDashStyle: 'longdash',
        lineColor: '#d2d2d2',
        lineWidth: 1
    },
    tooltip: {
        valueSuffix: null
    },
    series: [{
        name: 'Some Name',
        data: [1.0, 6.9, 2.5, 8.5, 1.0, 12.5]
    }],
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    colors: ['#e0502f'],
    plotOptions: {
        series: {
            lineWidth: 4,
            marker: {
                enabled: false
            }
        }
    }
});
对于Y轴标签:

对于勾号位置,限制为“内”或“外”,它们不能跨x轴


至于轴交叉,Steve p对此有答案

要移动x轴标签,请在x轴上添加类似的内容:

 labels:{
        y:25
 }
对于y轴,可以强制勾选间隔为每5%,并按如下方式设置标签格式:

    tickInterval: 5,
    labels: {
        format: '{value} %'
    }

还有一些调整:

您可以使用偏移移动轴位置,例如:

 yAxis: {
        min:-4,
        startOnTick:false,
        offset:-20
min和startOnTick强制y轴从-4开始,但不会打印标签,因为min不是5的倍数


代码整理()轴交叉可以使用“偏移”(请参阅我的更新)。喊得好,我没意识到
 yAxis: {
        min:-4,
        startOnTick:false,
        offset:-20