Javascript 如何实现amchart堆叠列图表可滚动
我实现了以下堆叠柱形图: 正如您所看到的,某些栏没有显示标签名称 我尝试从这个图表中增加宽度,现在我可以从条形图中看到标签(查看下面的新打印) 巴士现在我看不到所有项目。我想我需要添加一个滚动条。 你能帮帮我吗?基本上,我想在这个图表上添加一个X轴卷轴 注: 我使用的是amchart版本4 我用这个例子: 请按照下面的代码操作 用于构建图表的方法Javascript 如何实现amchart堆叠列图表可滚动,javascript,angular,amcharts,Javascript,Angular,Amcharts,我实现了以下堆叠柱形图: 正如您所看到的,某些栏没有显示标签名称 我尝试从这个图表中增加宽度,现在我可以从条形图中看到标签(查看下面的新打印) 巴士现在我看不到所有项目。我想我需要添加一个滚动条。 你能帮帮我吗?基本上,我想在这个图表上添加一个X轴卷轴 注: 我使用的是amchart版本4 我用这个例子: 请按照下面的代码操作 用于构建图表的方法 private buildChart(dataChart) { /* Chart code */ // Themes begin a
private buildChart(dataChart) {
/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Create chart instance
const chart = am4core.create('chartdiv', am4charts.XYChart);
for (const data of dataChart) {
chart.data.push(data);
}
console.log(chart);
// Create axes
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = 'model';
categoryAxis.renderer.grid.template.location = 0;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
// Create series
function createSeries(field, name) {
// Set up series
const series = chart.series.push(new am4charts.ColumnSeries());
series.name = name;
series.dataFields.valueY = field;
series.dataFields.categoryX = 'model';
series.sequencedInterpolation = true;
// Make it stacked
series.stacked = true;
// Configure columns
series.columns.template.width = am4core.percent(60);
series.columns.template.tooltipText = '[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}';
// Add label
const labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = '{valueY}';
labelBullet.locationY = 0.5;
return series;
}
createSeries('DISCONNECTED', 'DISCONNECTED');
createSeries('AVAILABLE', 'AVAILABLE');
// Legend
chart.legend = new am4charts.Legend();
}
html代码
<div class="row">
<div class="col-md-12 teste">
<app-card [title]="'Available Devices'" >
<div id="chartdiv" [style.height]="'400px'" [style.width]="'4000px'"></div>
</app-card>
</div>
我找到了一个解决方案。详情如下:
// I use the scrollbarX to create a horizontal scrollbar
chart.scrollbarX = new am4core.Scrollbar();
// here I set the scroolbar bottom the chart
chart.scrollbarX.parent = chart.bottomAxesContainer;
//here I chose not to show the startGrip (or button that expand the series from chart)
chart.scrollbarX.startGrip.hide();
chart.scrollbarX.endGrip.hide();
// here I set the start and end scroolbarX series that I would like show in chart initially
chart.scrollbarX.start = 0;
chart.scrollbarX.end = 0.25;
// here I chose not to show the zoomOutButton that appear above from chart
chart.zoomOutButton = new am4core.ZoomOutButton();
chart.zoomOutButton.hide();
因此,我构建图表的完整方法是:
private buildChart(dataChart) {
/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Create chart instance
const chart = am4core.create('chartdiv', am4charts.XYChart);
for (const data of dataChart) {
chart.data.push(data);
}
// Create axes
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = 'model';
categoryAxis.renderer.grid.template.location = 0;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
// Create series
function createSeries(field, name) {
// Set up series
const series = chart.series.push(new am4charts.ColumnSeries());
series.name = name;
series.dataFields.valueY = field;
series.dataFields.categoryX = 'model';
series.sequencedInterpolation = true;
// Make it stacked
series.stacked = true;
// Configure columns
series.columns.template.width = am4core.percent(60);
series.columns.template.tooltipText = '[bold]{name}[/]\n[font-size:15px]{categoryX}: {valueY}';
// Add label
const labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.text = '{valueY}';
labelBullet.locationY = 0.5;
return series;
}
createSeries('DISCONNECTED', 'DISCONNECTED');
createSeries('AVAILABLE', 'AVAILABLE');
// Legend
chart.legend = new am4charts.Legend();
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;
chart.scrollbarX.startGrip.hide();
chart.scrollbarX.endGrip.hide();
chart.scrollbarX.start = 0;
chart.scrollbarX.end = 0.25;
chart.zoomOutButton = new am4core.ZoomOutButton();
chart.zoomOutButton.hide();
}
按照下面的打印说明它是如何得到的