Блог

Главная - Вопросы по программированию - Как нарисовать столбчатую диаграмму с накоплением в amCharts 4?

Как нарисовать столбчатую диаграмму с накоплением в amCharts 4?

#javascript #amcharts #styling #amcharts4

#javascript #amcharts #стиль #amcharts4

Вопрос:

В настоящее время я использую XYChart с накоплением в amCharts 4, и я отображаю только один столбец: Столбчатая диаграмма с одним накоплением

Я пытаюсь выяснить, как получить контур вокруг всей панели — что-то вроде этого: введите описание изображения здесь

Я пробовал добавлять свойства stroke (и strokeWidth amp; strokeOpacity ) практически ко всему — к ряду, yAxes, xAxes и т. Д., Но ни один из них не дает результата, на который я надеюсь. Я чувствую, что мне не хватает чего-то очевидного, поэтому буду признателен за любую помощь.

Ответ №1:

Поскольку вы упомянули, что отображаете только один столбец и предполагаете, что это 100%-ная диаграмма с накоплением, лучшее, что вы можете сделать, это установить обводку на диаграмме plotContainer :

 chart.plotContainer.stroke = "#000000"

Обратите внимание, что высота столбцов серии должна быть установлена на 100%, чтобы она полностью расширялась внутри контейнера ( series.columns.template.height = am4core.percent(100) ).

Демонстрация ниже:

 var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
  "year": "2016",
  "europe": 2.5,
  "namerica": 2.5,
  "asia": 2.1,
  "lamerica": 0.3,
  "meast": 0.2,
  "africa": 0.1
}];

chart.legend = new am4charts.Legend();
chart.legend.position = "top";

chart.plotContainer.stroke = "#000000";
chart.plotContainer.strokeWidth = 5;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;
categoryAxis.renderer.labels.template.disabled = true;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true; 
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.calculateTotals = true;


function createSeries(field, name) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueX = field;
  series.dataFields.categoryY = "year";
  series.dataFields.valueXShow = "totalPercent";
  series.stacked = true;
  series.name = name;
  series.columns.template.height = am4core.percent(100);
}

createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");  
 body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 200px;
}  
 <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>

Ответ №2:

Я думаю, это то, чего мы можем достичь. Это не даст непрерывного хода в соответствии с вашими требованиями. Возможно, вы уже пробовали это.

введите описание изображения здесь

 function createSeries(field, name) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueX = field;
  series.dataFields.categoryY = "year";
  series.stacked = true;
  series.name = name;
  series.stroke = am4core.color("#000");
  
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.locationX = 0.5;
  labelBullet.label.text = "{valueX}";
  labelBullet.label.fill = am4core.color("#fff");
}

База кода — https://jsfiddle.net/sarunuk/dyohfr68/1 /