An error occurred while loading the file. Please try again.
-
Lückemeyer authored1772a3e6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Scatter Images</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 650px; margin: 35px auto; } </style></head><body> <div id="chart"> <apexchart type=scatter height=350 :options="chartOptions" :series="series" /> </div> <!-- Below element is just for displaying source code. it is not required. DO NOT USE --> <div id="html"> <div id="chart"> <apexchart type=scatter height=350 :options="chartOptions" :series="series" /> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script> <script> new Vue({ el: '#chart', components: { apexchart: VueApexCharts, }, data: { series: [{ data: [ [16.4, 5.4], [21.7, 4], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7], [10.9, 8.2], [16.4, 4], [13.6, 4.3], [13.6, 12], [29.9, 3], [10.9, 5.2], [16.4, 6.5], [10.9, 8], [24.5, 7.1], [10.9, 7], [8.1, 4.7], [19, 10], [27.1, 10], [24.5, 8], [27.1, 3], [29.9, 11.5], [27.1, 0.8],
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
[22.1, 2]
]
}],
chartOptions: {
chart: {
animations: {
enabled: false,
},
zoom: {
enabled: false,
},
toolbar: {
show: false
}
},
xaxis: {
tickAmount: 10,
min: 0,
max: 40
},
yaxis: {
tickAmount: 7
},
markers: {
size: 20
},
fill: {
type: 'image',
opacity: 1,
image: {
src: ['../../assets/images/ico-messenger.png'],
width: 40,
height: 40
}
}
}
},
})
</script>
</body>
</html>