微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Amcharts 图表在预览页面上看起来不错，但没有显示在最终网页上

分类：编程问答

如何解决Amcharts 图表在预览页面上看起来不错，但没有显示在最终网页上

我是个菜鸟，抱歉，如果答案很明显，但显然之前没有人问过同样的问题。

我正在写一篇文章，我已经在文章网页中使用了其他几个 Amcharts 图表（工作正常），如饼图和排序条形图。现在，我的问题是我的 100% 堆积柱形图在插件预览模式下似乎工作得很好，但只是从未显示在网页上，而是留下了空白。 这真的很奇怪，因为这个问题只存在于这种类型的图表中，而其他类型的图表显示和加载都很好。

我已经为所有图表提供了特定的 ID，并且我确保也为变量提供了唯一的名称，这样就不会出现可能会搞砸一切的重复项。真的，我对这个问题的原因一无所知，我需要一些帮助。提前感谢愿意帮助我的人。

这是两个 100% 堆积柱形图的代码：

图表 1

var chart10 = am4core.create("chartdiv10",am4charts.XYChart);
chart10.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart10.data = [
  {
    category: "Matériaux utilisés",value1: 5,value2: 5,value3: 5,value4: 23,value5: 39,value6: 28,value7: 24
   
  },{
    category: "Marque",value1: 6,value2: 9,value4: 15,value6: 36,value7: 19
  },{
    category: "Possibilités de personnalisation",value1: 19,value2: 19,value3: 28,value4: 24,value5: 12,value6: 15,value7: 12
  },{
    category: "Label Swiss Made",value1: 7,value3: 11,value5: 23,value6: 17,value7: 39
  },{
    category: "Possibilités de revente",value1: 38,value2: 23,value3: 16,value5: 16,value6: 10,value7: 11
},{
    category: "Ecoresponsabilité",value1: 25,value2: 20,value3: 20,value4: 21,value5: 19,value6: 9,value7: 15
  },{
    category: "Certifications officielles",value1: 8,value2: 6,value3: 6,value4: 16,value6: 33,value7: 37
  },{
    category: "Montre neuve",value1: 13,value2: 13,value4: 14,value5: 18,value6: 25,value7: 40
  },]
  
chart10.padding(30,30,10,30);

chart10.colors.list = [
  am4core.color("#81BEF7"),am4core.color("#58ACFA"),am4core.color("#2E9AFE"),am4core.color("#0080FF"),am4core.color("#2E64FE"),am4core.color("#0431B4"),am4core.color("#0B2161")
];

var categoryAxis10 = chart10.xAxes.push(new am4charts.CategoryAxis());
categoryAxis10.datafields.category = "category";
categoryAxis10.renderer.grid.template.location = 0;

var valueAxis10 = chart10.yAxes.push(new am4charts.ValueAxis());
valueAxis10.min = 0;
valueAxis10.max = 100;
valueAxis10.strictMinMax = true;
valueAxis10.calculatetotals = true;
valueAxis10.renderer.minWidth = 40;


var series110 = chart10.series.push(new am4charts.ColumnSeries());
series110.columns.template.width = am4core.percent(80);
series110.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series110.name = "1";
series110.datafields.categoryX = "category";
series110.datafields.valueY = "value1";
series110.datafields.valueYShow = "totalPercent";
series110.dataItems.template.locations.categoryX = 0.5;
series110.stacked = true;
series110.tooltip.pointerOrientation = "vertical";

var bullet110 = series110.bullets.push(new am4charts.LabelBullet());
bullet110.interactionsEnabled = false;
bullet110.label.text = "1";
bullet110.label.fill = am4core.color("#ffffff");
bullet110.locationY = 0.5;

var series210 = chart10.series.push(new am4charts.ColumnSeries());
series210.columns.template.width = am4core.percent(80);
series210.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series210.name = "2";
series210.datafields.categoryX = "category";
series210.datafields.valueY = "value2";
series210.datafields.valueYShow = "totalPercent";
series210.dataItems.template.locations.categoryX = 0.5;
series210.stacked = true;
series210.tooltip.pointerOrientation = "vertical";

var bullet210 = series210.bullets.push(new am4charts.LabelBullet());
bullet210.interactionsEnabled = false;
bullet210.label.text = "2";
bullet210.label.fill = am4core.color("#ffffff");
bullet210.locationY = 0.5;

var series310 = chart10.series.push(new am4charts.ColumnSeries());
series310.columns.template.width = am4core.percent(80);
series310.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series310.name = "3";
series310.datafields.categoryX = "category";
series310.datafields.valueY = "value3";
series310.datafields.valueYShow = "totalPercent";
series310.dataItems.template.locations.categoryX = 0.5;
series310.stacked = true;
series310.tooltip.pointerOrientation = "vertical";

var bullet310 = series310.bullets.push(new am4charts.LabelBullet());
bullet310.interactionsEnabled = false;
bullet310.label.text = "3";
bullet310.locationY = 0.5;
bullet310.label.fill = am4core.color("#ffffff");

var series410 = chart10.series.push(new am4charts.ColumnSeries());
series410.columns.template.width = am4core.percent(80);
series410.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series410.name = "4";
series410.datafields.categoryX = "category";
series410.datafields.valueY = "value4";
series410.datafields.valueYShow = "totalPercent";
series410.dataItems.template.locations.categoryX = 0.5;
series410.stacked = true;
series410.tooltip.pointerOrientation = "vertical";

var bullet410 = series410.bullets.push(new am4charts.LabelBullet());
bullet410.interactionsEnabled = false;
bullet410.label.text = "4";
bullet410.label.fill = am4core.color("#ffffff");
bullet410.locationY = 0.5;

var series510 = chart10.series.push(new am4charts.ColumnSeries());
series510.columns.template.width = am4core.percent(80);
series510.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series510.name = "5";
series510.datafields.categoryX = "category";
series510.datafields.valueY = "value5";
series510.datafields.valueYShow = "totalPercent";
series510.dataItems.template.locations.categoryX = 0.5;
series510.stacked = true;
series510.tooltip.pointerOrientation = "vertical";

var bullet510 = series510.bullets.push(new am4charts.LabelBullet());
bullet510.interactionsEnabled = false;
bullet510.label.text = "5";
bullet510.label.fill = am4core.color("#ffffff");
bullet510.locationY = 0.5;

var series610 = chart10.series.push(new am4charts.ColumnSeries());
series610.columns.template.width = am4core.percent(80);
series610.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series610.name = "6";
series610.datafields.categoryX = "category";
series610.datafields.valueY = "value6";
series610.datafields.valueYShow = "totalPercent";
series610.dataItems.template.locations.categoryX = 0.5;
series610.stacked = true;
series610.tooltip.pointerOrientation = "vertical";

var bullet610 = series610.bullets.push(new am4charts.LabelBullet());
bullet610.interactionsEnabled = false;
bullet610.label.text = "6";
bullet610.label.fill = am4core.color("#ffffff");
bullet610.locationY = 0.5;

var series710 = chart10.series.push(new am4charts.ColumnSeries());
series710.columns.template.width = am4core.percent(80);
series710.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series710.name = "7";
series710.datafields.categoryX = "category";
series710.datafields.valueY = "value7";
series710.datafields.valueYShow = "totalPercent";
series710.dataItems.template.locations.categoryX = 0.5;
series710.stacked = true;
series710.tooltip.pointerOrientation = "vertical";

var bullet710 = series710.bullets.push(new am4charts.LabelBullet());
bullet710.interactionsEnabled = false;
bullet710.label.text = "7";
bullet710.label.fill = am4core.color("#ffffff");
bullet710.locationY = 0.5;

categoryAxis10.renderer.labels.template.rotation = 320;

图表 2

var chart89 = am4core.create("chartdiv89",am4charts.XYChart);
chart89.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart89.data = [
  {
    category89: "Innovante",value189: 4,value289: 9,value389: 34,value489: 52,value589: 33
  },{
    category89: "Moderne",value289: 15,value389: 44,value489: 44,value589: 25
  },{
    category89: "Proche de ses clients",value189: 10,value289: 6,value489: 41,value589: 41
  },{
    category89: "Fermée/exclusive",value189: 3,value289: 8,value389: 32,value489: 33,value589: 56
  },{
    category89: "Attrayante professionnellement",value289: 5,value389: 15,value589: 68
}]
  
chart89.padding(30,30);

chart89.colors.list = [
  am4core.color("#2E9AFE"),am4core.color("#0B2161"),];

var categoryAxis89 = chart89.xAxes.push(new am4charts.CategoryAxis());
categoryAxis89.datafields.category = "category89";
categoryAxis89.renderer.grid.template.location = 0;

var valueAxis89 = chart89.yAxes.push(new am4charts.ValueAxis());
valueAxis89.min = 0;
valueAxis89.max = 100;
valueAxis89.strictMinMax = true;
valueAxis89.calculatetotals = true;
valueAxis89.renderer.minWidth = 40;


var series189 = chart89.series.push(new am4charts.ColumnSeries());
series189.columns.template.width = am4core.percent(80);
series189.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series189.name = "1";
series189.datafields.categoryX = "category89";
series189.datafields.valueY = "value189";
series189.datafields.valueYShow = "totalPercent";
series189.dataItems.template.locations.categoryX = 0.5;
series189.stacked = true;
series189.tooltip.pointerOrientation = "vertical";

var bullet189 = series189.bullets.push(new am4charts.LabelBullet());
bullet189.interactionsEnabled = false;
bullet189.label.text = "1";
bullet189.label.fill = am4core.color("#ffffff");
bullet189.locationY = 0.5;

var series289 = chart89.series.push(new am4charts.ColumnSeries());
series289.columns.template.width = am4core.percent(80);
series289.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series289.name = "2";
series289.datafields.categoryX = "category89";
series289.datafields.valueY = "value289";
series289.datafields.valueYShow = "totalPercent";
series289.dataItems.template.locations.categoryX = 0.5;
series289.stacked = true;
series289.tooltip.pointerOrientation = "vertical";

var bullet289 = series289.bullets.push(new am4charts.LabelBullet());
bullet289.interactionsEnabled = false;
bullet289.label.text = "2";
bullet289.label.fill = am4core.color("#ffffff");
bullet289.locationY = 0.5;

var series389 = chart89.series.push(new am4charts.ColumnSeries());
series389.columns.template.width = am4core.percent(80);
series389.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series389.name = "3";
series389.datafields.categoryX = "category89";
series389.datafields.valueY = "value389";
series389.datafields.valueYShow = "totalPercent";
series389.dataItems.template.locations.categoryX = 0.5;
series389.stacked = true;
series389.tooltip.pointerOrientation = "vertical";

var bullet389 = series389.bullets.push(new am4charts.LabelBullet());
bullet389.interactionsEnabled = false;
bullet389.label.text = "3";
bullet389.locationY = 0.5;
bullet389.label.fill = am4core.color("#ffffff");

var series489 = chart89.series.push(new am4charts.ColumnSeries());
series489.columns.template.width = am4core.percent(80);
series489.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series489.name = "4";
series489.datafields.categoryX = "category89";
series489.datafields.valueY = "value489";
series489.datafields.valueYShow = "totalPercent";
series489.dataItems.template.locations.categoryX = 0.5;
series489.stacked = true;
series489.tooltip.pointerOrientation = "vertical";

var bullet489 = series489.bullets.push(new am4charts.LabelBullet());
bullet489.interactionsEnabled = false;
bullet489.label.text = "4";
bullet489.label.fill = am4core.color("#ffffff");
bullet489.locationY = 0.5;

var series589 = chart89.series.push(new am4charts.ColumnSeries());
series589.columns.template.width = am4core.percent(80);
series589.columns.template.tooltipText =
  "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series589.name = "5";
series589.datafields.categoryX = "category89";
series589.datafields.valueY = "value589";
series589.datafields.valueYShow = "totalPercent";
series589.dataItems.template.locations.categoryX = 0.5;
series589.stacked = true;
series589.tooltip.pointerOrientation = "vertical";

var bullet589 = series589.bullets.push(new am4charts.LabelBullet());
bullet589.interactionsEnabled = false;
bullet589.label.text = "5";

另外，一个重要的注意事项：我尝试在网页上一次只使用一个，但仍然没有得到不同的结果。所以我猜可能不是重复的变量。

解决方法

问题解决了。这是由于我从其他地方复制/粘贴并提供给包含图表的 divi 文本框的特定设计。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot