Highcharts JS 的样式问题

Posted 2023-03-14

【中文标题】Highcharts JS 的样式问题

【英文标题】：Styling issues with Highcharts JS

【发布时间】：2015-05-08 16:38:31

【问题描述】：

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

xAxis: 
    startOnTick: true,
    endOnTick: true

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

我还需要 yAxis 不从底部开始或在顶部结束。我希望第一个刻度位于第二个位置，名称“收入”和“订单量”位于顶部，最后一个刻度位于下方一行。我似乎也无法让它们以与所有标签相同的方式对齐。 这是我现在的样子http://jsfiddle.net/kyu3eh6L/

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

任何帮助将不胜感激。我似乎在他们的 API 中找不到我需要的东西。

【参考方案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 了解这些更改的外观。

【参考方案2】：

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