如何使用如图所示的自定义高度图表?

时间:2015-09-04 16:48:46

标签: javascript jquery angularjs highcharts

请你告诉我删除标签y轴标签。我使用高图库制作一个简单的图表。 http://www.highcharts.com/demo/areaspline 我看到一些y轴标签 0,2.5,5..etc 我想删除那个标签。我需要显示如图所示的图表[![在此处输入图片说明] [1] ] [1] http://jsfiddle.net/19bxgykz/1/

我们可以在右侧显示如图所示吗?

这是我的代码 http://jsfiddle.net/19bxgykz/1/

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Average fruit consumption during one week'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 250,
            y: 300,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: [
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday',
                'Sunday'
            ]
        },
        yAxis: {
            title: {
                text: 'Fruit units'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.8
            }
        },
        series: [{
            name: 'John',
            data: [3, 4, 3, 5, 4, 10, 12]
        }]
    });
});

2 个答案:

答案 0 :(得分:1)

使用以下代码修改yAxis

yAxis: {
        title: {
            text: ''
        },
        labels: {
            enabled:false
        }
    },

答案 1 :(得分:0)

如果您想从左侧看到yAxis上的标签,则可以使用opposite属性。在配置中说这个:

yAxis : {
  opposite:true,
  //other options
}

请参阅此处的代码:https://jsfiddle.net/19bxgykz/1/