import Adsense from ”@/components/Adsense.astro”;
billboard.js charts – legend click 이벤트 없애기
legend 클릭 이벤트 없애기
이 기능이 좋긴 한데, 불편한 부분도 있당. 아래와 같이 필요없으면, 옵션처리를 하면 아무런 동작을 안하도록 할 수 있다.
legend: {
item: {
onclick: function(id) {
false;
},
},
},결과를 비교해보면,
legend click 시 사라짐
legend click 시 아무동작 안함
풀 코드가 필요한가? ㅋ 어디에 위치하는지 헷갈릴 수도
// 테스트 수량
var chart1 = bb.generate({
data: {
type: "pie", // for ESM specify as: pie()
labels: {
colors: "black",
}
},
pie: {
padding: 3,
label: {
format: function(value, ratio, id) {
return id+"\n("+value+"개)";
}
}
},
<strong> legend: {
item: { onclick: function(id) { false; }, }
},</strong>
bindto: "#chart-container1"
});
참고 사이트
https://stackoverflow.com/questions/67925029/how-to-disable-legend-click-on-billboard-js-charts
How to disable legend click on billboard.js charts?
공식 API 문서 위치는 여기
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.legend
a post with TikZJax
This is an example post with TikZ code. TikZJax converts script tags (containing TikZ code) into SVGs.
<script type=“text/tikz”>
\begin{document}
\begin{tikzpicture}
\draw[red,fill=black!60!red] (0,0) circle [radius=1.5];
\draw[green,fill=black!60!green] (0,0) circle [x radius=1.5cm, y radius=10mm];
\draw[blue,fill=black!60!blue] (0,0) circle [x radius=1cm, y radius=5mm, rotate=30];
\end{tikzpicture}
\end{document}
</script>
a post with chart.js
This is an example post with some chart.js code.
```chartjs
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}
```This is how it looks like:
{
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "# of bugs",
"fill": false,
"lineTension": 0.1,
"backgroundColor": "rgba(75,192,192,0.4)",
"borderColor": "rgba(75,192,192,1)",
"borderCapStyle": "butt",
"borderDash": [],
"borderDashOffset": 0,
"borderJoinStyle": "miter",
"pointBorderColor": "rgba(75,192,192,1)",
"pointBackgroundColor": "#fff",
"pointBorderWidth": 1,
"pointHoverRadius": 5,
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
"pointHoverBorderColor": "rgba(220,220,220,1)",
"pointHoverBorderWidth": 2,
"pointRadius": 1,
"pointHitRadius": 10,
"data": [
65,
59,
80,
81,
56,
55,
40
],
"spanGaps": false
}
]
},
"options": {}
}Also another example chart.
```chartjs
{
"type": "doughnut",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
```Which generates:
{
"type": "doughnut",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}a post with echarts
This is an example post with some echarts code.
```echarts
{
"title": {
"text": "ECharts Getting Started Example"
},
"responsive": true,
"tooltip": {},
"legend": {
"top": "30px",
"data": ["sales"]
},
"xAxis": {
"data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
},
"yAxis": {},
"series": [
{
"name": "sales",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20]
}
]
}
```Which generates:
{
"title": {
"text": "ECharts Getting Started Example"
},
"responsive": true,
"tooltip": {},
"legend": {
"top": "30px",
"data": ["sales"]
},
"xAxis": {
"data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
},
"yAxis": {},
"series": [
{
"name": "sales",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20]
}
]
}Note that this library offer support for both light and dark themes. You can switch between them using the theme switcher in the top right corner of the page.
a post with geojson
This is an example post with some geojson code. The support is provided thanks to Leaflet. To create your own visualization, go to geojson.io.
```geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[
-60.11363029935569,
-2.904625022183211
],
[
-60.11363029935569,
-3.162613728707967
],
[
-59.820894493858034,
-3.162613728707967
],
[
-59.820894493858034,
-2.904625022183211
],
[
-60.11363029935569,
-2.904625022183211
]
]
],
"type": "Polygon"
}
}
]
}
```Which generates:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[
-60.11363029935569,
-2.904625022183211
],
[
-60.11363029935569,
-3.162613728707967
],
[
-59.820894493858034,
-3.162613728707967
],
[
-59.820894493858034,
-2.904625022183211
],
[
-60.11363029935569,
-2.904625022183211
]
]
],
"type": "Polygon"
}
}
]
}a post with vega lite
This is an example post with some vega lite code.
```vega_lite
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
"data": {
"url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
},
"transform": [
{"filter": "datum['IMDB Rating'] != null"},
{"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
{
"joinaggregate": [{
"op": "mean",
"field": "IMDB Rating",
"as": "AverageRating"
}]
},
{
"calculate": "datum['IMDB Rating'] - datum.AverageRating",
"as": "RatingDelta"
}
],
"mark": "point",
"encoding": {
"x": {
"field": "Release Date",
"type": "temporal"
},
"y": {
"field": "RatingDelta",
"type": "quantitative",
"title": "Rating Delta"
},
"color": {
"field": "RatingDelta",
"type": "quantitative",
"scale": {"domainMid": 0},
"title": "Rating Delta"
}
}
}
```Which generates:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order. The graph is for all Movies before 2019.",
"data": {
"url": "https://raw.githubusercontent.com/vega/vega/main/docs/data/movies.json"
},
"transform": [
{"filter": "datum['IMDB Rating'] != null"},
{"filter": {"timeUnit": "year", "field": "Release Date", "range": [null, 2019]}},
{
"joinaggregate": [{
"op": "mean",
"field": "IMDB Rating",
"as": "AverageRating"
}]
},
{
"calculate": "datum['IMDB Rating'] - datum.AverageRating",
"as": "RatingDelta"
}
],
"mark": "point",
"encoding": {
"x": {
"field": "Release Date",
"type": "temporal"
},
"y": {
"field": "RatingDelta",
"type": "quantitative",
"title": "Rating Delta"
},
"color": {
"field": "RatingDelta",
"type": "quantitative",
"scale": {"domainMid": 0},
"title": "Rating Delta"
}
}
}This plot supports both light and dark themes.
a post with plotly.js
This is an example post with some plotly code.
```plotly
{
"data": [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"type": "scatter"
},
{
"x": [1, 2, 3, 4],
"y": [16, 5, 11, 9],
"type": "scatter"
}
]
}
```Which generates:
{
"data": [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"type": "scatter"
},
{
"x": [1, 2, 3, 4],
"y": [16, 5, 11, 9],
"type": "scatter"
}
]
}Also another example chart.
```plotly
{
"data": [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"mode": "markers"
},
{
"x": [2, 3, 4, 5],
"y": [16, 5, 11, 9],
"mode": "lines"
},
{
"x": [1, 2, 3, 4],
"y": [12, 9, 15, 12],
"mode": "lines+markers"
}
],
"layout": {
"title": {
"text": "Line and Scatter Plot"
}
}
}
```This is how it looks like:
{
"data": [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"mode": "markers"
},
{
"x": [2, 3, 4, 5],
"y": [16, 5, 11, 9],
"mode": "lines"
},
{
"x": [1, 2, 3, 4],
"y": [12, 9, 15, 12],
"mode": "lines+markers"
}
],
"layout": {
"title": {
"text": "Line and Scatter Plot"
}
}
}