cumany / obsidian-echarts

Render echarts in obsidian,[Apache ECharts](https://echarts.apache.org/en/index.html) An Open Source JavaScript Visualization Library

A struggling full-stack pseudo-developer from China

📫 如何联系我

Thank you very much for your support!

obsidian-echarts's Issues

The app.plugins.plugins['obsidian-echarts'].render(option, this.container) throws an error within the onclick event function.

// Source data
let tasks = dv.pages('"400_DailyRecords"').file.tasks

const tagsGroups = tasks.map(task => task.tags);
const clientInput = 'Strings';
console.log(clientInput)
// 提取客户和标签计数
const clientTagCounts = {};
tagsGroups.forEach(tagsGroup => {
	const clientTag = tagsGroup.find(tag => tag.startsWith("#客户/"));
	if (clientTag) {
		const client = clientTag.replace("#客户/", "");
		clientTagCounts[client] = clientTagCounts[client] || {};
		tagsGroup.forEach(tag => {
			if (!tag.startsWith("#客户/")) {
				clientTagCounts[client][tag] = (clientTagCounts[client][tag] || 0) + 1;
			}
		});
	}
});
// console.log(clientTagCounts)
// 根据输入的客户名称部分筛选数据
const filteredClientTagCounts = {};
for (const client in clientTagCounts) {
	if (client.includes(clientInput)) {
		filteredClientTagCounts[client] = clientTagCounts[client];
	}
}
// console.log(filteredClientTagCounts)
// 准备数据以绘制柱状图
const xAxisData = Object.keys(filteredClientTagCounts);
console.log(xAxisData)
console.log(filteredClientTagCounts[xAxisData[0]])
const seriesData = [];
for (const tag in filteredClientTagCounts[xAxisData[0]]) {
	const tagData = [];
	for (const client in filteredClientTagCounts) {
		tagData.push(filteredClientTagCounts[client][tag] || 0);
		console.log(tagData)
	}
	seriesData.push({
		name: tag,
		type: 'bar',
		data: tagData
	});
}

// 使用 ECharts 绘制柱状图
const option = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	legend: {
		data: Object.keys(filteredClientTagCounts[xAxisData[0]])
	},
	xAxis: {
		type: 'category',
		data: xAxisData
	},
	yAxis: {
		type: 'value'
	},
	series: seriesData
};

app.plugins.plugins['obsidian-echarts'].render(option, this.container)

这段dataviewjs是正常工作的。/This piece of code is working fine.
但如果我增加一个按钮，将app.plugins.plugins['obsidian-echarts'].render(option, this.container)放在onclick事件函数里，就会报错：/But if I add a button and put app.plugins.plugins['obsidian-echarts'].render(option, this.container) inside the onclick event function, it will throw an error:

plugin:obsidian-echarts:96688 Uncaught TypeError: Cannot read properties of undefined (reading 'createDiv')
    at Renderer.initChart (plugin:obsidian-echarts:96688:35)
    at Renderer.render (plugin:obsidian-echarts:96773:30)
    at EchartsPlugin.render (plugin:obsidian-echarts:96887:18)
    at eleBtn.onclick (eval at <anonymous> (plugin:dataview:1:1), <anonymous>:91:42)

代码是这样的：/The code looks like this:

// Tag input
dv.span("  ");
dv.span("Tag: ");
let eleTag = dv.el("input");
eleTag.style.width = "120px";

// Query button
dv.span("  ");
let eleBtn = dv.el("button", "Query");
let MSG = document.getElementById("MSG");

function msg(sMsg) {
  new Notice(sMsg);
  MSG.innerText = sMsg;
}

eleBtn.onclick = function() {
	// Source data
	let tasks = dv.pages('"400_DailyRecords"').file.tasks
	
	const tagsGroups = tasks.map(task => task.tags);
	const clientInput = eleTag.value;
	console.log(clientInput)
	if (!clientInput) {
		return;
	}
	// 提取客户和标签计数
	const clientTagCounts = {};
	tagsGroups.forEach(tagsGroup => {
	    const clientTag = tagsGroup.find(tag => tag.startsWith("#客户/"));
	    if (clientTag) {
	        const client = clientTag.replace("#客户/", "");
	        clientTagCounts[client] = clientTagCounts[client] || {};
	        tagsGroup.forEach(tag => {
	            if (!tag.startsWith("#客户/")) {
	                clientTagCounts[client][tag] = (clientTagCounts[client][tag] || 0) + 1;
	            }
	        });
	    }
	});
	// console.log(clientTagCounts)
	// 根据输入的客户名称部分筛选数据
	const filteredClientTagCounts = {};
	for (const client in clientTagCounts) {
	    if (client.includes(clientInput)) {
	        filteredClientTagCounts[client] = clientTagCounts[client];
	    }
	}
	// console.log(filteredClientTagCounts)
	// 准备数据以绘制柱状图
	const xAxisData = Object.keys(filteredClientTagCounts);
	console.log(xAxisData)
	console.log(filteredClientTagCounts[xAxisData[0]])
	const seriesData = [];
	for (const tag in filteredClientTagCounts[xAxisData[0]]) {
	    const tagData = [];
	    for (const client in filteredClientTagCounts) {
	        tagData.push(filteredClientTagCounts[client][tag] || 0);
	        console.log(tagData)
	    }
	    seriesData.push({
	        name: tag,
	        type: 'bar',
	        data: tagData
	    });
	}

	// 使用 ECharts 绘制柱状图
	const option = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
	    legend: {
	        data: Object.keys(filteredClientTagCounts[xAxisData[0]])
	    },
	    xAxis: {
	        type: 'category',
	        data: xAxisData
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: seriesData
	};
	
	app.plugins.plugins['obsidian-echarts'].render(option, this.container)
}

怎么给热力图添加点击事件？

我想点击这些小方块能打开obsidian 里的文件

最近版本没办法使用啊？

最新版本样例打开无法正常显示图表。

Plugin fails to load on mobile app (Android)

I recently installed your plugin and it works great on PC, thanks!
Unfortunately when I loaded up my vault on the mobile app, it popped up saying the plugin failed to load and it was disabled.
There was no further information I could find on why it failed to load.

Are you able to look into it?

在预览模式下报错

Evaluation Error: SyntaxError: Unexpected token '&'
at DataviewInlineApi.eval (plugin:dataview:18370:21)
at evalInContext (plugin:dataview:18371:7)
at asyncEvalInContext (plugin:dataview:18381:32)
at DataviewJSRenderer.render (plugin:dataview:18402:19)
at DataviewRefreshableRenderer.maybeRefresh (plugin:dataview:17980:22)
at HTMLDivElement.r (app://obsidian.md/enhance.js:1:11445)