Dataview结合echart.js的问题

我试图在 obsidian 中使用更加丰富的 Echart 图表用来记录,但是我试了一些方法之后并没有达到我想要的预期,所有想求助一下我应该如何在obsidian中使用echar.js,在 js 代码方面我是完全的新手:sob::sob::sob:


遇到的问题

无法导入 echart.js 并调用其在obsidian中画图

SYSTEM INFO:
	Obsidian version: v1.7.7
	Installer version: v1.7.7
	Operating system: Windows 11
	Login status: not logged in
	Language: zh
	Plugins installed: 18
	Plugins enabled: 11
		1:  JS Engine v0.1.20
		2:  Dataview v0.5.67
		3:  obsidian echarts v0.0.3
		4:  Modules v2.4.4
		5:  Fix Require Modules v6.1.0
		6:  CustomJS v1.0.21

预期的效果

  1. Step 1: 引入 Javascript;
  2. Step 2 :使用 Dataview 或者 JS Engine 进行调用;
  3. Step 3: 绘制 Echart

引入 JS

在我进行了一些资料查找后,以下三款社区插件有进行尝试,但是并未生效,我觉得我用他们的出发点本身就不对(或许)
但是老实说,我并不知道我应该怎么引入,但参见下面一节的内容后,我选择了 await import("https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"); 的引入方法;

  • Modules
  • Fix Require Modules
  • CustomJS

调用 Js

常见的是使用 Dataview 进行调用,但是似乎 JS Engine 也能进行调用;但是我也没看懂,如果大佬们有相关经验,也请告诉我;

已尝试的解决方案

尝试了怎样的解决方法,为什么行不通等等。

我参考了此篇blog,进行了一些尝试 Dataview结合char.js的问题 - 疑问解答 - Obsidian 中文论坛 ,以下是可以执行的代码,但当我试图将其替换成 EchartJs 的时候他并没有生效;

~~~dataviewjs
const ctx = dv.el("div");

// 导入 Chart.js
await import("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js");

// 创建环形图
const echartContainer = document.createElement("div");
echartContainer.style.width = "50%"; // 设置容器宽度
echartContainer.style.margin = "0 auto"; // 中心对齐
echartContainer.style.position = "relative"; // 相对定位
ctx.appendChild(echartContainer); // 将容器添加到 ctx

const echartCanvas = echartContainer.appendChild(document.createElement("canvas"));

const data = {
    labels: [
      'Red',
      'Blue',
      'Yellow'
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [300, 50, 100],
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)'
      ],
      hoverOffset: 4
    }]
  };

const echartConfig = {
    type: 'doughnut',
    data: data,
};
new Chart(echartCanvas.getContext("2d"), echartConfig);
~~~

以下是我改为导入echart的代码,他没有报错,但是也没有显示;

var echartDom = dv.el("div");

// 导入 eChart.js
await import("https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js");

// 创建容器
const echartContainer = document.createElement("div");
echartContainer.style.width = "50%"; // 设置容器宽度
echartContainer.style.margin = "0 auto"; // 中心对齐
echartContainer.style.position = "relative"; // 相对定位
echartDom.appendChild(echartContainer); // 将容器添加到 ctx

const echartCanvas = echartContainer.appendChild(document.createElement("canvas"));

var myChart = echarts.init(echartDom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
var option;

option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };


myChart.setOption(option);

似乎是必须定义 DOM 高度

楼主的样例其实都对, 但最开始需要给 echartDom 设 height

var echartDom = dv.el("div");
echartDom.style.width = "500px";   // 不必须设置
echartDom.style.height = "400px";  // 必须设置

// 以下都一样

// 导入 eChart.js
await import("https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js");

1 个赞

感谢您的回复,这样确实我已经运行成功了,另外还想问一下关于cdn模块导入的问题

  1. 在这个示例中,我应该如何使用 jquery 导入 svg 图片呢,Examples - beef-cuts
  2. 我有注意到其他的贴子对引入模块的问题有所涉及,但是我没完全看懂:tired_face:

我能明确的是我询问到了一些办法可以让引入 svg 图片工作,但是我并不想每次都对文件进行改写

const vault = parent.app.vault;
const svgTFile = vault.getFileByPath("your/datapath/Beef_cuts_France.svg");
const geoData = await vault.read(svgTFile);

其实 svg 搁本地可能是最省心的

如果在线调 svg, 看这个牛肉的代码, 也不必须是拿 jQuery 获取啊, Obsidian 里有个 await request(...) 可以做类似的事:


```dataviewjs
var echartDom = dv.el("div");
// echartDom.style.width = "500px"; // 设置容器宽度
echartDom.style.height = "400px"; // 设置容器宽度


// 导入 eChart.js
await import("https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js");
const svg = await request('https://echarts.apache.org/examples/data/asset/geo/Beef_cuts_France.svg');


var myChart = echarts.init(echartDom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });

echarts.registerMap('Beef_cuts_France', { svg: svg });
var option = {
  tooltip: {},
  visualMap: {
    left: 'center',
    bottom: '10%',
    min: 5,
    max: 100,
    orient: 'horizontal',
    text: ['', 'Price'],
    realtime: true,
    calculable: true,
    inRange: {
      color: ['#dbac00', '#db6e00', '#cf0000']
    }
  },
  series: [
    {
      name: 'French Beef Cuts',
      type: 'map',
      map: 'Beef_cuts_France',
      roam: true,
      emphasis: {
        label: {
          show: true
        }
      },
      selectedMode: true,
      data: [
        { name: 'Queue', value: 15 },
        { name: 'Langue', value: 35 },
        { name: 'Plat de joue', value: 15 },
        { name: 'Gros bout de poitrine', value: 25 },
        { name: 'Jumeau à pot-au-feu', value: 45 },
        { name: 'Onglet', value: 85 },
        // 原样例更多数据, 省略

      ]
    }
  ]
};
myChart.setOption(option);

```

感谢回复,我主要是想问如果调用多个 cdn JS脚本的时候应该怎么引用:joy:
不过确实,我觉得这部分是主要分两个步骤,

  • 一个是引入 js 模块
  • 一个是处理数据

关于引入 js 模块这部分因为我没看懂,所以想多问问 :sunny:

如果关心 dvjs 块里怎么导入任意在线模块, 楼主查到的资料里已经写了啊 ref 类似这样子:

```dataviewjs

console.log('before', typeof jQuery === 'undefined' ? 'undefined jQuery' : 'defined jQuery');

const jqueryscript = Object.assign(document.createElement('script'), {
  src: 'https://code.jquery.com/jquery-3.7.1.min.js',
  type: 'text/javascript', charset: 'utf8',
})
dv.container.appendChild(jqueryscript)
console.log(jqueryscript)

await sleep(1000);
console.log('after jQuery =', jQuery)
```

然后就可以用 jQuery 了 jQuery('.workspace-leaf').css({backgroundColor: "#abcdef"})

1 个赞