如何在HighCharts中去除边距并在删除数据点时避免布局更改?

huangapple go评论73阅读模式
英文:

How can I remove margins in HighCharts and avoid layout changes when removing data points?

问题

如何删除HighCharts中的边距。

给定此示例:

Highcharts.chart('container', {

    chart: {
        type: "column",
    },
    xAxis: {
        type: "datetime",
        min: 1684324800000,
        max: 1684411200000,
        tickInterval: 3600000,
        labels: {
            formatter: (a) => {
                let d = new Date(a.value);
                return d.getUTCHours()
            }
        }
    },
    yAxis: { visible: false },
    plotOptions: {
        series: {
            pointWidth: 1
        }
    },
    series: [
        {
            "name": "Vibration",
            "color": "blue",
            "data": [
                [
                    1684383060000,
                    2
                ],
                [
                    1684401060000,
                    1
                ]
            ]
        }
    ]

});

我希望删除前导和尾随空白。

我尝试了许多设置,如startOnTick、endOnTick、marginLeft和marginRight等...

奇怪的是,如果删除系列中的最后一个数据点,布局会突然变成所需的显示方式:

[1684383060000, 2]

http://jsfiddle.net/xc0u7hm5/

将边距设置为静态值不是一个吸引人的选项,因为我需要动态计算该值。

还令我担忧的是,图表的显示依赖于显示的数据。

英文:

How can I remove margins in HighCharts.

Given this example:

Highcharts.chart('container', {

    chart: {
      type: "column",
    },
    xAxis: {
        type: "datetime",
        min: 1684324800000,
        max: 1684411200000,
        tickInterval: 3600000,
        labels: {
          formatter: (a) => {
            let d = new Date(a.value);
            return d.getUTCHours() 
          }
       }
    },
    yAxis: {visible:false},
    plotOptions: {
       series: {
         pointWidth: 1
       }
    },
    series: [
    {
        "name": "Vibration",
        "color": "blue",
        "data": [
            [
                1684383060000,
                2
            ],
            [
                1684401060000,
                1
            ]
        ]
    }
   ]
    
});

http://jsfiddle.net/36gqkocj/8/

I wish to remove the lead and trailing space.
如何在HighCharts中去除边距并在删除数据点时避免布局更改?

I have tried lots of things setting startOnTick, endOnTick, marginLeft and marginRight, ...

The strange ting is that if you remove the last data point in the series, the layout suddenly changes into the wanted display:

[1684383060000, 2]

http://jsfiddle.net/xc0u7hm5/

Setting the margin to someting static is not an appealling option, as I will need to calculate the value dynamically.

Also it worries me that the display of the chart depends on the data being displayed.

答案1

得分: 1

The difference results from the fact that the default pointRange value is calculated in another way for multiple points.

From Highcharts API:

pointRange: 数字, 空

每个点有效的X轴范围。这决定了柱宽度。在分类轴上,默认情况下范围为1(一个类别单位)。在线性和日期时间轴上,范围将被计算为两个最接近的数据点之间的距离。

默认的null表示它会自动计算,但可以使用此选项来覆盖自动值。

如果启用了数据排序,则此选项默认设置为1。
默认为null。

作为解决方案,将pointRange设置为1

plotOptions: {
    series: {
        ...,
        pointRange: 1
    }
}

Live demo: http://jsfiddle.net/BlackLabel/tysfuc53/

API Reference: https://api.highcharts.com/highcharts/series.column.pointRange

英文:

The difference results from the fact that the default pointRange value is calculated in another way for multiple points.

From Highcharts API:

> pointRange: number, null
>
> The X axis range that each point is valid for. This determines the
> width of the column. On a categorized axis, the range will be 1 by
> default (one category unit). On linear and datetime axes, the range
> will be computed as the distance between the two closest data points.
>
> The default null means it is computed automatically, but this option
> can be used to override the automatic value.
>
> This option is set by default to 1 if data sorting is enabled.
> Defaults to null.

As a solution set pointRange to 1:

  plotOptions: {
    series: {
      ...,
      pointRange: 1
    }
  }

Live demo: http://jsfiddle.net/BlackLabel/tysfuc53/

API Reference: https://api.highcharts.com/highcharts/series.column.pointRange

huangapple
  • 本文由 发表于 2023年5月22日 20:58:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76306445.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定