ApexCharts柱状图markers标记无法显示问题求助

问题原因&解决方案 #

你遇到的原生JS版本柱状图目标标记不显示的问题，有两个常见触发原因：

• 所使用的ApexCharts版本低于3.26.0，早期版本对原生JS端的柱状图目标标记功能支持存在缺陷，而Angular、React封装包默认依赖的版本较高，所以会出现框架版本可用、原生JS不可用的差异
• 配置项缺失，原生JS版本需要主动在plotOptions.bar下声明开启goals标记展示，框架封装包默认内置了该默认配置，所以不需要额外声明

修正后的完整代码 #

var options = {
  series: [
    {
      name: "Actual",
      data: [
        {
          x: "2011",
          y: 1292,
          goals: [
            {
              name: "Expected",
              value: 1400,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2012",
          y: 4432,
          goals: [
            {
              name: "Expected",
              value: 5400,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2013",
          y: 5423,
          goals: [
            {
              name: "Expected",
              value: 5200,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2014",
          y: 6653,
          goals: [
            {
              name: "Expected",
              value: 6500,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2015",
          y: 8133,
          goals: [
            {
              name: "Expected",
              value: 6600,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2016",
          y: 7132,
          goals: [
            {
              name: "Expected",
              value: 7500,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2017",
          y: 7332,
          goals: [
            {
              name: "Expected",
              value: 8700,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
        {
          x: "2018",
          y: 6553,
          goals: [
            {
              name: "Expected",
              value: 7300,
              strokeWidth: 5,
              strokeColor: "#775DD0",
            },
          ],
        },
      ],
    },
  ],
  chart: {
    height: 350,
    type: "bar",
  },
  plotOptions: {
    bar: {
      columnWidth: "60%",
      // 新增以下配置开启目标标记显示
      goals: {
        show: true
      }
    },
  },
  colors: ["#00E396"],
  dataLabels: {
    enabled: false,
  },
  legend: {
    show: true,
    showForSingleSeries: true,
    customLegendItems: ["Actual", "Expected"],
    markers: {
      fillColors: ["#00E396", "#775DD0"],
    },
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

另外需要确保页面上存在id为chart的DOM容器，且引入的ApexCharts包版本不低于3.26.0即可正常显示目标标记。

内容的提问来源于stack exchange，提问作者si1m3