Skip to content
GitLab
An error occurred while loading the file. Please try again.
Switch branch/tag
Find file BlameHistoryPermalink
line-column.html 2.80 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>Line, Column &amp; Area</title>
9
10 
  <link href="../../assets/styles.css" rel="stylesheet" />
11
12 
  <style>
13 
    #chart {
14 
      max-width: 650px;
15 
      margin: 35px auto;
16 
    }
17 
  </style>
18 
</head>
19
20 
<body>
21 
  <div id="app"></div>
22
23 
  <div id="html">
24 
          &lt;div id=&quot;chart&quot;&gt;&#10;            &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;line&quot; height=&quot;350&quot; /&gt;&#10;          &lt;/div&gt;
25 
  </div>
26
27 
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
28 
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
29 
  <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js">
30 
  </script>
31 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
32
33 
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
34 
  <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script>
35
36 
  <script type="text/babel">
37
38 
    class MixedChart extends React.Component {
39
40 
      constructor(props) {
41 
        super(props);
42
43 
        this.state = {
44 
          options: {
45 
            stroke: {
46 
              width: [0, 4]
47 
            },
48 
            title: {
49 
              text: 'Traffic Sources'
50 
            },
51 
            labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'
52 
            ],
53 
            xaxis: {
54 
              type: 'datetime'
55 
            },
56 
            yaxis: [{
57 
              title: {
58 
                text: 'Website Blog',
59 
              },
60
61 
            }, {
62 
              opposite: true,
63 
              title: {
64 
                text: 'Social Media'
65 
              }
66 
            }]
67 
          },
68 
          series: [{
69 
            name: 'Website Blog',
70 
            type: 'column',
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 98
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160] }, { name: 'Social Media', type: 'line', data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16] }], } } render() { return ( <div> <div id="chart"> <ReactApexChart options={this.state.options} series={this.state.series} type="line" height="350" /> </div> <div id="html-dist"> </div> </div> ); } } const domContainer = document.querySelector('#app'); ReactDOM.render(React.createElement(MixedChart), domContainer); </script> </body> </html>

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