Chart.js - Versionsgeschichte

109.193.152.88: /* Beispiel: Noto Sans SemiCondensed Font in SVG Grafik */

2024-07-15T12:04:15Z

Beispiel: Noto Sans SemiCondensed Font in SVG Grafik

109.193.152.88: /* Beispiel: Noto Sans SemiCondensed Font in SVG Grafik */

2024-07-15T12:03:47Z

Beispiel: Noto Sans SemiCondensed Font in SVG Grafik

109.193.152.88: /* Chart.js - Schrift */

2024-07-15T12:03:08Z

Chart.js - Schrift

109.193.152.88: /* Chart.js - Schrift */

2024-07-13T12:37:30Z

Chart.js - Schrift

109.193.152.88 am 13. Juli 2024 um 11:11 Uhr

2024-07-13T11:11:20Z

134.3.86.14: /* Chart.js - SVG Export */

2023-06-26T16:01:12Z

Chart.js - SVG Export

134.3.86.14: /* Chart.js - SVG Export */

2023-06-26T15:54:34Z

Chart.js - SVG Export

134.3.86.14 am 26. Juni 2023 um 15:54 Uhr

2023-06-26T15:54:09Z

134.3.74.15: Die Seite wurde neu angelegt: „Chart.js ist eine Library zum Erstellen von Diagrammen. Die Diagramme werden über WegGl gerendert. Man kann sehr effektiv Diagramme erstellen und die Ausgabe…“

2022-01-24T09:54:18Z

Die Seite wurde neu angelegt: „Chart.js ist eine Library zum Erstellen von Diagrammen. Die Diagramme werden über WegGl gerendert. Man kann sehr effektiv Diagramme erstellen und die Ausgabe…“

Neue Seite

Chart.js ist eine Library zum Erstellen von Diagrammen. Die Diagramme werden über WegGl gerendert.

Man kann sehr effektiv Diagramme erstellen und die Ausgabe recht umfangreich anpassen.

== Chart.js - Snippets ==
[[Chart.js - Snippets]]

@@ Zeile 194: / Zeile 194: @@
 HTML/CSS - Schrift so definieren, dass font-family genau den vom Grafikprogramm genutzten Namen nutzt. Im Zweifel testen. Evtl. auch erstmal ohne Stil dann ergänzen.
 <syntaxhighlight lang="html5">
-    <style>
+<style>
-    @font-face {
+@font-face {
-    font-family: \'NotoSans-SemiCondensed\';
+font-family: \'NotoSans-SemiCondensed\';
-    src: url(\'../fonts/NotoSans-SemiCondensed.ttf\') format(\'truetype\');
+src: url(\'../fonts/NotoSans-SemiCondensed.ttf\') format(\'truetype\');
-    src: url(\'../fonts/Noto-Sans-SemiCondensed1.ttf.woff\') format(\'woff\');
+src: url(\'../fonts/Noto-Sans-SemiCondensed1.ttf.woff\') format(\'woff\');
-    font-weight: normal;
+font-weight: normal;
-    font-style: normal;
+font-style: normal;
-    </style>
+</style>
 </syntaxhighlight>

@@ Zeile 204: / Zeile 204: @@
 </syntaxhighlight>
 <syntaxhighlight lang="php">
 $chartDefaults = "

← Nächstältere Version		Version vom 15. Juli 2024, 12:03 Uhr
Zeile 186:		Zeile 186:

	Chart.defaults.font.family = \"'NotoSansSemiCondensed',Arial,'Helvetica Neue',sans-serif\";		Chart.defaults.font.family = \"'NotoSansSemiCondensed',Arial,'Helvetica Neue',sans-serif\";
		+
		+	=== Stil wird nicht in Affinity Designer erkannt (SVG Export) ===
		+	Damit die Schrift richtig erkannt wird kann man sie entweder in die SVG Grafik einbetten (kompliziert aber zuverlässig). Es reicht aber auch wenn man genau den richtigen Schriftnamen verwendet.
		+
		+	==== Beispiel: Noto Sans SemiCondensed Font in SVG Grafik ====
		+
		+	HTML/CSS - Schrift so definieren, dass font-family genau den vom Grafikprogramm genutzten Namen nutzt. Im Zweifel testen. Evtl. auch erstmal ohne Stil dann ergänzen.
		+	<syntaxhighlight lang="html5">
		+	<style>
		+	@font-face {
		+	font-family: \'NotoSans-SemiCondensed\';
		+	src: url(\'../fonts/NotoSans-SemiCondensed.ttf\') format(\'truetype\');
		+	src: url(\'../fonts/Noto-Sans-SemiCondensed1.ttf.woff\') format(\'woff\');
		+	font-weight: normal;
		+	font-style: normal;
		+	</style>
		+	</syntaxhighlight>
		+
		+	<syntaxhighlight lang="php">
		+	$chartDefaults = "
		+	Chart.defaults.font.size = 14;
		+	Chart.defaults.color = '$dark';
		+	Chart.defaults.font.family = \"'NotoSans-SemiCondensed',Arial,'Helvetica Neue',sans-serif\";
		+	";
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 13. Juli 2024, 12:37 Uhr
Zeile 179:		Zeile 179:
	== Chart.js - Schrift ==		== Chart.js - Schrift ==

−	Schriftart muss auf der HTML Seite verfügbar sein. Geht also ganz normal mit Webschriften	+	Schriftart muss auf der HTML Seite verfügbar sein. Geht also ganz normal mit Webschriften. Hat bei mir nicht mit allen geklappt. TTF hat funtioniert.
		+
		+	Schrift wurde z.T abgeschnitten. Hat aber geklappt wenn die Default Schrift so weit läuft wie die am Ende gerenderte. Ich nehme an er berechnet zuerst mit dem Standard den Platz. Man sieht auch wie die Schrift nachgeladen wird und plötzlich wechselt. Evtl. man dafür sorgen, dass die Schrift vorgeladen wird.
		+
		+	Definition über Default Werte:
		+
		+	Chart.defaults.font.family = \"'NotoSansSemiCondensed',Arial,'Helvetica Neue',sans-serif\";

← Nächstältere Version		Version vom 13. Juli 2024, 11:11 Uhr
Zeile 175:		Zeile 175:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+	== Chart.js - Schrift ==
		+
		+	Schriftart muss auf der HTML Seite verfügbar sein. Geht also ganz normal mit Webschriften

@@ Zeile 96: / Zeile 96: @@
 // arguments: filename, link text, the chart, and its settings
 createSvgLink('chart.svg', 'SVG', chart, options);
 </syntaxhighlight>

← Nächstältere Version		Version vom 26. Juni 2023, 15:54 Uhr
Zeile 97:		Zeile 97:
	createSvgLink('chart.svg', 'SVG', chart, options);		createSvgLink('chart.svg', 'SVG', chart, options);

−	</~~script~~>	+	</syntaxhighlight>

← Nächstältere Version		Version vom 26. Juni 2023, 15:54 Uhr
Zeile 5:		Zeile 5:
	== Chart.js - Snippets ==		== Chart.js - Snippets ==
	[[Chart.js - Snippets]]		[[Chart.js - Snippets]]
		+	== Chart.js - SVG Export ==
		+	Plugin: http://gliffy.github.io/canvas2svg/
		+
		+	Beispielskript:
		+	<syntaxhighlight lang="javascript">
		+	/*
		+	PNG AND SVG EXPORT (for Illustrator)
		+	Jeff Thompson \| 2021 \| jeffreythompson.org
		+
		+	Online charts are great, but what if you want to share
		+	them on social media, use them in print projects, etc?
		+	With a little tweaking, we can export and download
		+	any chart we make as a PNG and SVG!
		+
		+	SVGs are vector graphics, meaning we can also open
		+	them in Illustrator and access all the shapes! This is
		+	great if you want to create a base chart in code, then
		+	style it in Illustrator to make it super cool.
		+
		+	Note! Your SVG may look cut off when viewing in
		+	the web browser. Fear not: if you open it in Illustrator
		+	you'll see everything there :)
		+
		+	DATA SOURCE
		+	+ https://en.wikipedia.org/wiki/World_population
		+
		+	MORE INFO
		+	+ Uses canvas2svg.js
		+	http://gliffy.github.io/canvas2svg
		+
		+	CHALLENGES
		+	1. Try opening the SVG in Illustrator: can you ungroup
		+	everything and change colors and text?
		+
		+	*/
		+
		+	// set the output dimensions (helpful
		+	// especially for PNG)
		+	let width = 900;
		+	let height = 600;
		+
		+	// (scroll down for more details...)
		+	let data = [ 585, 660, 710, 978, 1650, 6127, 8549, 10152, 10875 ];
		+	let labels = [ 1500, 1600, 1700, 1800, 1900, 2000, 2030, 2060, 2100 ];
		+	let title = 'World Population (in millions)';
		+
		+	let options = {
		+	type: 'bar',
		+	data: {
		+	labels: labels,
		+	datasets: [{
		+	backgroundColor: 'rgb(255,150,0)',
		+	barPercentage: 1.0,
		+	data: data,
		+	label: 'Population (in millions)'
		+	}]
		+	},
		+	options: {
		+	title: {
		+	display: true,
		+	text: title
		+	},
		+	legend: {
		+	display: false
		+	},
		+
		+	// these need to be set to false
		+	// for export!
		+	animation: false,
		+	responsive: false
		+	}
		+	}
		+
		+	// set the chart's size based on the
		+	// values we set at the top
		+	let context = document.getElementById('canvas');
		+	context.width = width;
		+	context.height = height;
		+
		+	// create the chart
		+	let chart = new Chart(document.getElementById('canvas'), options);
		+
		+	// and generate the PNG and SVG links!
		+	// (the code that does this is in the 'libs'
		+	// folder > export.js)
		+
		+	// arguments: filename, link text, chart we created
		+	createPngLink('chart.png', 'Export PNG, ', chart);
		+
		+	// arguments: filename, link text, the chart, and its settings
		+	createSvgLink('chart.svg', 'SVG', chart, options);
		+
		+	</script>