AMChart v4 Столбец с шириной столбца диаграммы из ряда данных - PullRequest
1 голос
/ 09 апреля 2020

Мне нужна помощь с этим знаменитым плагином. Я использую диаграмму «Диаграмма с накоплением столбцов» для создания «Диаграммы Мекко», потому что в v4 не является родным. Я сделал это, но я не знаю, как реализовать динамическую c ширину на основе серии.

Вот код:

function am4themes_colorRiskScore(target) {
          if (target instanceof am4core.ColorSet) {
            target.list = [
              am4core.color("#D6EAD6"),
              am4core.color("#D6EBC1"),
              am4core.color("#FAF3BA"),
              am4core.color("#FAE3C9"),
              am4core.color("#EDC8CC"),
              am4core.color("#000000")
            ];
          }
        }

      am4core.useTheme(am4themes_colorRiskScore);
      var chart = am4core.create("mekkochart", am4charts.XYChart);
      chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

      chart.data = [];

      chart.padding(30, 30, 10, 30);
      chart.legend = new am4charts.Legend();

      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
      categoryAxis.dataFields.category = "category";
      categoryAxis.renderer.grid.template.location = 0;
      categoryAxis.renderer.labels.template.rotation = 90;
      categoryAxis.renderer.labels.template.fontSize = 13;
      categoryAxis.renderer.showAllValueLabels = true;
      categoryAxis.renderer.minGridDistance = 30;
      categoryAxis.renderer.width = 0.5;
      console.log(categoryAxis.renderer.width);

      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.min = 0;
      valueAxis.max = 100;
      valueAxis.strictMinMax = true;
      valueAxis.calculateTotals = true;
      valueAxis.renderer.minWidth = 50;


      var series1 = chart.series.push(new am4charts.ColumnSeries());
      series1.columns.template.width = am4core.percent(100);
      series1.columns.template.tooltipText =
        "{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
      series1.name = "Low Risk";
      series1.dataFields.categoryX = "category";
      series1.dataFields.valueY = "Low";
      series1.dataFields.valueYShow = "totalPercent";
      series1.dataItems.template.locations.categoryX = 0.5;
      series1.stacked = true;
      series1.tooltip.pointerOrientation = "vertical";

      var bullet1 = series1.bullets.push(new am4charts.LabelBullet());
      bullet1.interactionsEnabled = false;
      bullet1.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
      bullet1.label.fill = am4core.color("#000000");
      bullet1.locationY = 0.5;

      var series2 = chart.series.push(new am4charts.ColumnSeries());
      series2.columns.template.width = am4core.percent(100);
      series2.columns.template.tooltipText =
          "{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
      series2.name = "Medium Risk";
      series2.dataFields.categoryX = "category";
      series2.dataFields.valueY = "Medium";
      series2.dataFields.valueYShow = "totalPercent";
      series2.dataItems.template.locations.categoryX = 0.5;
      series2.stacked = true;
      series2.tooltip.pointerOrientation = "vertical";

      var bullet2 = series2.bullets.push(new am4charts.LabelBullet());
      bullet2.interactionsEnabled = false;
      bullet2.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
      bullet2.locationY = 0.5;
      bullet2.label.fill = am4core.color("#000000");

      var series3 = chart.series.push(new am4charts.ColumnSeries());
      series3.columns.template.width = am4core.percent(100);
      series3.columns.template.tooltipText =
        "{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
      series3.name = "High Risk";
      series3.dataFields.categoryX = "category";
      series3.dataFields.valueY = "High"; 
      series3.dataFields.valueYShow = "totalPercent";
      series3.dataItems.template.locations.categoryX = 0.5;
      series3.stacked = true;
      series3.tooltip.pointerOrientation = "vertical";

      var bullet3 = series3.bullets.push(new am4charts.LabelBullet());
      bullet3.interactionsEnabled = false;
      bullet3.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
      bullet3.locationY = 0.5;
      bullet3.label.fill = am4core.color("#000000");

      var series4 = chart.series.push(new am4charts.ColumnSeries());
      series4.columns.template.width = am4core.percent(100);
      series4.columns.template.tooltipText =
        "{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
      series4.name = "Significant Risk";
      series4.dataFields.categoryX = "category";
      series4.dataFields.valueY = "Significant";
      series4.dataFields.valueYShow = "totalPercent";
      series4.dataItems.template.locations.categoryX = 0.5;
      series4.stacked = true;
      series4.tooltip.pointerOrientation = "vertical";

      var bullet4 = series4.bullets.push(new am4charts.LabelBullet());
      bullet4.interactionsEnabled = false;
      bullet4.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
      bullet4.locationY = 0.5;
      bullet4.label.fill = am4core.color("#000000");

      var series5 = chart.series.push(new am4charts.ColumnSeries());
      series5.columns.template.width = am4core.percent(100);
      series5.columns.template.tooltipText =
        "{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
      series5.name = "Critical Risk";
      series5.dataFields.categoryX = "category";
      series5.dataFields.valueY = "Critical";
      series5.dataFields.valueYShow = "totalPercent";
      series5.dataItems.template.locations.categoryX = 0.5;
      series5.stacked = true;
      series5.tooltip.pointerOrientation = "vertical";

      var bullet5 = series5.bullets.push(new am4charts.LabelBullet());
      bullet5.interactionsEnabled = false;
      bullet5.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
      bullet5.locationY = 0.5;
      bullet5.label.fill = am4core.color("#000000");

      chart.scrollbarX = new am4core.Scrollbar();

А вот пример серии:

chart.data = 
[{
  category: 'Germany',
  id: 1,
  Low: 4,
  Medium: 5,
  High: 0,
  Significant: 10,
  Critical: 8,
  point: 0.4
},
{ category: 'Italy',
  id: 2,
  Low: 2,
  Medium: 10,
  High: 0,
  Significant: 4,
  Critical: 2,
  point: 0.8
}]

где точка - это значение от 0,0 до 1,0.

Есть ли какая-нибудь хорошая душа, которая может мне помочь?

...