防止在AmChart的末端截留子弹

问题描述

我从AmChart的官方文档中获取了以下代码，并在其上添加了项目符号。

// Create chart instance
var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.colors.step = 2;

// Add data
chart.data = [{
  "year": "1995","cars": 1567,"motorcycles": 683,"bicycles": 146
},{
  "year": "1996","cars": 1617,"motorcycles": 691,"bicycles": 138
},{
  "year": "1997","cars": 1630,"motorcycles": 642,"bicycles": 127
},{
  "year": "1998","cars": 1660,"motorcycles": 699,"bicycles": 105
},{
  "year": "1999","cars": 1683,"motorcycles": 721,"bicycles": 109
},{
  "year": "2000","cars": 1691,"motorcycles": 737,"bicycles": 112
},{
  "year": "2001","cars": 1298,"motorcycles": 680,"bicycles": 101
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.datafields.category = "year";
categoryAxis.title.text = "Year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGriddistance = 20;

categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;


var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Percent";
valueAxis.calculatetotals = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.adapter.add("text",function(text) {
  return text + "%";
});

// Create series
var series = chart.series.push(new am4charts.Lineseries());
series.datafields.valueY = "cars";
series.datafields.valueYShow = "totalPercent";
series.datafields.categoryX = "year";
series.name = "Cars";

series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#FFF");

series.tooltip.getstrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;

series.fillOpacity = 0.85;
series.stacked = true;

// static
series.legendSettings.labelText = "Cars total:";
series.legendSettings.valueText = "{valueY.close}";

// hovering
series.legendSettings.itemLabelText = "Cars:";
series.legendSettings.itemValueText = "{valueY}";

var series2 = chart.series.push(new am4charts.Lineseries());
series2.datafields.valueY = "motorcycles";
series2.datafields.valueYShow = "totalPercent";
series2.datafields.categoryX = "year";
series2.name = "Motorcycles";

series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series2.tooltip.getFillFromObject = false;
series2.tooltip.background.fill = am4core.color("#FFF");

series2.tooltip.getstrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;

series2.fillOpacity = 0.85;
series2.stacked = true;

// static
series2.legendSettings.labelText = "Motorcycles total:";
series2.legendSettings.valueText = "{valueY.close}";

// hovering
series2.legendSettings.itemLabelText = "Motorcycles:";
series2.legendSettings.itemValueText = "{valueY}";

var series3 = chart.series.push(new am4charts.Lineseries());
series3.datafields.valueY = "bicycles";
series3.datafields.valueYShow = "totalPercent";
series3.datafields.categoryX = "year";
series3.name = "Bicycles";
series3.tooltipText = "{name}: [bold]{valueY}[/]";

series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#FFF");

series3.tooltip.getstrokeFromObject = true;
series3.tooltip.background.strokeWidth = 3;

series3.fillOpacity = 0.85;
series3.stacked = true;

// static
series3.legendSettings.labelText = "Bicycles total:";
series3.legendSettings.valueText = "{valueY.close}";

// hovering
series3.legendSettings.itemLabelText = "Bicycles:";
series3.legendSettings.itemValueText = "{valueY}";

// For adding bullets on the chart
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color('#fff');
bullet.circle.strokeWidth = 1;
bullet.circle.radius = 10;
bullet.circle.opacity = 1;
bullet.circle.locationX = 0.6;

// Add cursor
chart.cursor = new am4charts.XYCursor();

// add legend
chart.legend = new am4charts.Legend();

由以上代码生成的图表如下所示，

最左边和最右边的子弹被剪掉，我该如何防止这种情况发生。移categoryAxis.startLocation和categoryAxis.endLocation可以解决此问题，但它也可以移整个轴，是否还有其他方法可以防止子弹被卡住？

解决方法

我认为您想完全删除startLocation和endLocation。
这将使该点完全显示。

请参阅以下工作摘要...

$(document).ready(function() {
  // Create chart instance
  var chart = am4core.create("chart",am4charts.XYChart);
  chart.colors.step = 2;

  // Add data
  chart.data = [{
    "year": "1995","cars": 1567,"motorcycles": 683,"bicycles": 146
  },{
    "year": "1996","cars": 1617,"motorcycles": 691,"bicycles": 138
  },{
    "year": "1997","cars": 1630,"motorcycles": 642,"bicycles": 127
  },{
    "year": "1998","cars": 1660,"motorcycles": 699,"bicycles": 105
  },{
    "year": "1999","cars": 1683,"motorcycles": 721,"bicycles": 109
  },{
    "year": "2000","cars": 1691,"motorcycles": 737,"bicycles": 112
  },{
    "year": "2001","cars": 1298,"motorcycles": 680,"bicycles": 101
  }];

  // Create axes
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "year";
  categoryAxis.title.text = "Year";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 20;

  var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = "Percent";
  valueAxis.calculateTotals = true;
  valueAxis.min = 0;
  valueAxis.max = 100;
  valueAxis.strictMinMax = true;
  valueAxis.renderer.labels.template.adapter.add("text",function(text) {
    return text + "%";
  });

  // Create series
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = "cars";
  series.dataFields.valueYShow = "totalPercent";
  series.dataFields.categoryX = "year";
  series.name = "Cars";

  series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#FFF");

  series.tooltip.getStrokeFromObject = true;
  series.tooltip.background.strokeWidth = 3;

  series.fillOpacity = 0.85;
  series.stacked = true;

  // static
  series.legendSettings.labelText = "Cars total:";
  series.legendSettings.valueText = "{valueY.close}";

  // hovering
  series.legendSettings.itemLabelText = "Cars:";
  series.legendSettings.itemValueText = "{valueY}";

  var series2 = chart.series.push(new am4charts.LineSeries());
  series2.dataFields.valueY = "motorcycles";
  series2.dataFields.valueYShow = "totalPercent";
  series2.dataFields.categoryX = "year";
  series2.name = "Motorcycles";

  series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series2.tooltip.getFillFromObject = false;
  series2.tooltip.background.fill = am4core.color("#FFF");

  series2.tooltip.getStrokeFromObject = true;
  series2.tooltip.background.strokeWidth = 3;

  series2.fillOpacity = 0.85;
  series2.stacked = true;

  // static
  series2.legendSettings.labelText = "Motorcycles total:";
  series2.legendSettings.valueText = "{valueY.close}";

  // hovering
  series2.legendSettings.itemLabelText = "Motorcycles:";
  series2.legendSettings.itemValueText = "{valueY}";

  var series3 = chart.series.push(new am4charts.LineSeries());
  series3.dataFields.valueY = "bicycles";
  series3.dataFields.valueYShow = "totalPercent";
  series3.dataFields.categoryX = "year";
  series3.name = "Bicycles";
  series3.tooltipText = "{name}: [bold]{valueY}[/]";

  series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

  series3.tooltip.getFillFromObject = false;
  series3.tooltip.background.fill = am4core.color("#FFF");

  series3.tooltip.getStrokeFromObject = true;
  series3.tooltip.background.strokeWidth = 3;

  series3.fillOpacity = 0.85;
  series3.stacked = true;

  // static
  series3.legendSettings.labelText = "Bicycles total:";
  series3.legendSettings.valueText = "{valueY.close}";

  // hovering
  series3.legendSettings.itemLabelText = "Bicycles:";
  series3.legendSettings.itemValueText = "{valueY}";

  // For adding bullets on the chart
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color('#fff');
  bullet.circle.strokeWidth = 1;
  bullet.circle.radius = 10;
  bullet.circle.opacity = 1;
  bullet.circle.locationX = 0.6;

  // Add cursor
  chart.cursor = new am4charts.XYCursor();

  // add legend
  chart.legend = new am4charts.Legend();
});

html,body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
  min-height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class="chart" id="chart"></div>

如果要尝试最大化图表中的轴，
使用startLocation和endLocation使点更靠近边缘。
如果您不希望它们一直处于边缘，
添加到结束位置，这就是您从一开始就获得的东西。

categoryAxis.startLocation = 0.4;
categoryAxis.endLocation = 0.6;

请参阅以下工作摘要...

$(document).ready(function() {
  // Create chart instance
  var chart = am4core.create("chart","bicycles": 101
  }];

  // Create axes
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "year";
  categoryAxis.title.text = "Year";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 20;

  categoryAxis.startLocation = 0.35;
  categoryAxis.endLocation = 0.65;

  var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = "Percent";
  valueAxis.calculateTotals = true;
  valueAxis.min = 0;
  valueAxis.max = 100;
  valueAxis.strictMinMax = true;
  valueAxis.renderer.labels.template.adapter.add("text",body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
  min-height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class="chart" id="chart"></div>

如果要防止子弹被夹住，请按照here中所述在图表对象中将maskBullets设置为false

chart.maskBullets = false;

下面的演示

// Create chart instance
var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.colors.step = 2;
chart.maskBullets = false;

// Add data
chart.data = [{
  "year": "1995","bicycles": 146
},{
  "year": "1996","bicycles": 138
},{
  "year": "1997","bicycles": 127
},{
  "year": "1998","bicycles": 105
},{
  "year": "1999","bicycles": 109
},{
  "year": "2000","bicycles": 112
},{
  "year": "2001","bicycles": 101
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.title.text = "Year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;


var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Percent";
valueAxis.calculateTotals = true;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.template.adapter.add("text",function(text) {
  return text + "%";
});

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "cars";
series.dataFields.valueYShow = "totalPercent";
series.dataFields.categoryX = "year";
series.name = "Cars";

series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#FFF");

series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;

series.fillOpacity = 0.85;
series.stacked = true;

// static
series.legendSettings.labelText = "Cars total:";
series.legendSettings.valueText = "{valueY.close}";

// hovering
series.legendSettings.itemLabelText = "Cars:";
series.legendSettings.itemValueText = "{valueY}";

var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "motorcycles";
series2.dataFields.valueYShow = "totalPercent";
series2.dataFields.categoryX = "year";
series2.name = "Motorcycles";

series2.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series2.tooltip.getFillFromObject = false;
series2.tooltip.background.fill = am4core.color("#FFF");

series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;

series2.fillOpacity = 0.85;
series2.stacked = true;

// static
series2.legendSettings.labelText = "Motorcycles total:";
series2.legendSettings.valueText = "{valueY.close}";

// hovering
series2.legendSettings.itemLabelText = "Motorcycles:";
series2.legendSettings.itemValueText = "{valueY}";

var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.valueYShow = "totalPercent";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.tooltipText = "{name}: [bold]{valueY}[/]";

series3.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";

series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color("#FFF");

series3.tooltip.getStrokeFromObject = true;
series3.tooltip.background.strokeWidth = 3;

series3.fillOpacity = 0.85;
series3.stacked = true;

// static
series3.legendSettings.labelText = "Bicycles total:";
series3.legendSettings.valueText = "{valueY.close}";

// hovering
series3.legendSettings.itemLabelText = "Bicycles:";
series3.legendSettings.itemValueText = "{valueY}";

// For adding bullets on the chart
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color('#fff');
bullet.circle.strokeWidth = 1;
bullet.circle.radius = 10;
bullet.circle.opacity = 1;
bullet.circle.locationX = 0.6;

// Add cursor
chart.cursor = new am4charts.XYCursor();

// add legend
chart.legend = new am4charts.Legend();

#chartdiv {
width: 100%; 
height: 500px;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

amcharts amcharts4 charts reactjs reactjs