Skip to content
GitLab
An error occurred while loading the file. Please try again.
Switch branch/tag
Find file BlameHistoryPermalink
basic-column.html 2.23 KiB
Open in Web IDE
1 
<!DOCTYPE html>
2 
<html lang="en">
3
4 
<head>
5 
  <meta charset="UTF-8">
6 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 
  <title>Basic Column - Grouped</title>
9
10
11 
  <link href="../../assets/styles.css" rel="stylesheet" />
12
13 
  <style>
14 
    #chart {
15 
        max-width: 650px;
16 
        margin: 35px auto;
17 
    }
18 
    </style>
19 
</head>
20
21 
<body>
22 
  <div id="chart">
23 
    <apexchart type=bar height=350 :options="chartOptions" :series="series" />
24 
  </div>
25
26 
  <!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
27 
  <div id="html">
28 
    &lt;div id="chart">
29 
      &lt;apexchart type=bar height=350 :options="chartOptions" :series="series" />
30 
    &lt;/div>
31 
  </div>
32
33 
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
34 
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
35 
  <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
36
37 
  <script>
38 
    new Vue({
39 
      el: '#chart',
40 
      components: {
41 
        apexchart: VueApexCharts,
42 
      },
43 
      data: {
44 
        series: [{
45 
          name: 'Net Profit',
46 
          data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
47 
        }, {
48 
          name: 'Revenue',
49 
          data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
50 
        }, {
51 
          name: 'Free Cash Flow',
52 
          data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
53 
        }],
54 
        chartOptions: {
55 
          plotOptions: {
56 
            bar: {
57 
              horizontal: false,
58 
              endingShape: 'rounded',
59 
              columnWidth: '55%',
60 
            },
61 
          },
62 
          dataLabels: {
63 
            enabled: false
64 
          },
65 
          stroke: {
66 
            show: true,
67 
            width: 2,
68 
            colors: ['transparent']
69 
          },
70
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], }, yaxis: { title: { text: '$ (thousands)' } }, fill: { opacity: 1 }, tooltip: { y: { formatter: function (val) { return "$ " + val + " thousands" } } } } } }) </script> </body> </html>

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal