1

我在大学的最后一个项目中使用 amCharts。我同时使用列系列和线系列在同一个图表上显示数据。但是我需要将线系列向左移动,但列。

在当前情况下,它看起来像这样:两条线系列都从 X 轴的第一个实例的中间开始。 在此处输入图像描述

它需要是这样的:两个系列都从最左边开始。

在此处输入图像描述

在 xAxis 上设置 setLocation 也会将列向左移动。我只需要将线系列移到最左边。

let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = 'category';
xAxis.renderer.cellStartLocation = 0.1;
xAxis.renderer.cellEndLocation = 0.9;
xAxis.renderer.grid.template.location = 0;
xAxis.renderer.labels.template.fontSize = 10;
xAxis.startLocation = -5;

这是 LineSeries 的代码块:

function createLineSeries(value, name, color, dasharray){
  let series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = value;
  series.dataFields.categoryX = 'category';
  series.name = name;
  series.tensionX = 0.8;
  series.tensionY = 1;
  series.strokeWidth = 3;
  
  
  if (dasharray) {
    series.strokeDasharray = dasharray;
  }

  if(color) {
    series.stroke = am4core.color(color); 
  }

  series.events.on('hidden', arrangeColumns);
  series.events.on('shown', arrangeColumns);

  
}

这是 jsfiddle 的链接: https ://jsfiddle.net/liquidcharcoal/7wn1qgrj/

4

1 回答 1

-1

这里的解释很清楚,对我有用:https ://www.amcharts.com/docs/v4/concepts/axes/positioning-axis-elements/#Controlling_axis_and_cell_lengths

简而言之,设置:

xAxis.startLocation = 0.5;
xAxis.endLocation = 0.5;
于 2021-07-20T14:07:05.707 回答