Apexcharts - Bar with Markers 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - Bar with Markers</title>
</head>

<body>
<div id="chart"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/apexcharts/3.35.0/apexcharts.min.js"></script>
</body>
</html>

CSS

#chart {
    max-width: 650px;
    margin: 35px auto;
}

JavaScript

var options = {
  series: [
  {
    name: 'Actual',
    data: [
      {
        x: '2011',
        y: 12,
        goals: [
          {
            name: 'Expected',
            value: 14,
            strokeWidth: 2,
            strokeDashArray: 2,
            strokeColor: '#775DD0'
          }
        ]
      },
      {
        x: '2012',
        y: 44,
        goals: [
          {
            name: 'Expected',
            value: 54,
            strokeWidth: 5,
            strokeHeight: 10,
            strokeColor: '#775DD0'
          }
        ]
      },
      {
        x: '2013',
        y: 54,
        goals: [
          {
            name: 'Expected',
            value: 52,
            strokeWidth: 10,
            strokeHeight: 0,
            strokeLineCap: 'round',
            strokeColor: '#775DD0'
          }
        ]
      },
      {
        x: '2014',
        y: 66,
        goals: [
          {
            name: 'Expected',
            value: 61,
            strokeWidth: 10,
            strokeHeight: 0,
            strokeLineCap: 'round',
            strokeColor: '#775DD0'
          }
        ]
      },
      {
        x: '2015',
        y: 81,
        goals: [
          {
            name: 'Expected',
            value: 66,
            strokeWidth: 10,
            strokeHeight: 0,
            strokeLineCap: 'round',
            strokeColor: '#775DD0'
          }
        ]
      },
      {
        x: '2016',
        y: 67,
        goals: [
          {
            name: 'Expected',
            value: 70,
            strokeWidth: 5,
            strokeHeight: 10,
            strokeColor: '#775DD0'
          }
        ]
      }
    ]
  }
],
  chart: {
  height: 350,
  type: 'bar'
},
plotOptions: {
  bar: {
    horizontal: true,
  }
},
colors: ['#00E396'],
dataLabels: {
  formatter: function(val, opt) {
    const goals =
      opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
        .goals

    if (goals && goals.length) {
      return `${val} / ${goals[0].value}`
    }
    return val
  }
},
legend: {
  show: true,
  showForSingleSeries: true,
  customLegendItems: ['Actual', 'Expected'],
  markers: {
    fillColors: ['#00E396', '#775DD0']
  }
}
};

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