防止在 AmChart 的末端剪断项目符号
Prevent clipping of bullets at extreme ends in 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", 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.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", 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>
如果要防止项目符号被截断,请在图表对象中将 maskBullets
设置为 false,如记录 here
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",
"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();
#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>
我从 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", 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.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", 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>
如果要防止项目符号被截断,请在图表对象中将 maskBullets
设置为 false,如记录 here
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",
"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();
#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>