Question

我使用Highcharts制作折线图并使其与我需要的设计非常接近。我似乎无法让xAxis在边缘开始和结束。我不希望yAxis和第一个情节线之间有任何空间。只需使用：

xAxis: {
    startOnTick: true,
    endOnTick: true
}

似乎没有做我需要的事情。我错过了什么吗？

我还需要yAxis不从底部开始或在顶部结束。我希望第一个标记位于第二个位置和名称，＆＃34; Revenue＆＃34;和＆＃34;订单量＆＃34;，位于顶部，最后一个勾选下面一行。我似乎无法让它们以与所有标签相同的方式对齐。这就是我现在看起来像http://jsfiddle.net/kyu3eh6L/

这是最终结果需要的样子。 http://postimg.org/image/y3otwee3d/

任何帮助都会非常感激。我似乎无法在他们的API中找到我需要的东西。

Answer 1

您当前的状态和最终结果之间有一点差异，但我会解决您提出的两个问题。第一：

我似乎无法让xAxis在边缘开始和结束

这有点奇怪，但这是我建议的解决方案，专门针对带有类别的x轴：

var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];

$('#container').highcharts({
    // ...
    xAxis: {
        categories: categories,
        min: 0.5,
        max: categories.length - 1.5,
        startOnTick: false,
        endOnTick: false
        // ...
    }
});

您还说：

我希望第一个标记位于第二个位置，名称“收入”和“订单量”位于顶部，最后一个标记位于下面一行。

使用相同操作执行这两种操作的一种方法是使用formatter作为标签。例如：

$('#container').highcharts({
    // ...
    yAxis: [{
        // ...
        title: {
            text: 'Revenue ($)',
            enabled: false
        },
        labels: {
            // ...
            formatter: function() {
                if(this.isLast) {
                    return this.axis.options.title.text;
                }
                else if(!this.isFirst) {
                    return this.value+"k";
                }
                return;
            }
        }
    },
    //...
    ]
});

请参阅this updated JSFiddle了解这些更改的外观。

Answer 2

要开始和结束边缘，只需在pointPlacement: 'on'上设置plotOptions.series即可。要放置标题，请使用x和y选项。试试http://jsfiddle.net/kyu3eh6L/4/

Highcharts JS

2 个答案: