想用echarts做个关系图，但苦于不知怎么解释成VFP的，请高手帮帮忙 - 编程论坛

#2

laowan0012022-11-21 14:13

不需要解释成VFP的，表单里放个webbrowser，运行你附件里的HTML就行

#3

shonken2022-11-21 14:56

以下是引用laowan001在2022-11-21 14:13:18的发言：

不需要解释成VFP的，表单里放个webbrowser，运行你附件里的HTML就行

就是生成的HTML没用

#4

laowan0012022-11-21 16:21

以下是引用shonken在2022-11-21 14:56:28的发言：

就是生成的HTML没用

你的问题是什么呢？
是想把echart翻译成VFP，还是想解决html在webbrowser里正常运行的问题

#5

laowan0012022-11-21 16:56

看了你graph.html，一直在转圈圈，从给的url下载的示例也是转圈圈
这不是VFP的问题，是html代码的问题，先把html搞正常了吧
你这个图我没研究过，柱型图等琢磨过几个，都是构造好html了就成功了

#6

shonken2022-11-21 18:09

以下是引用laowan001在2022-11-21 16:56:55的发言：

看了你graph.html，一直在转圈圈，从给的url下载的示例也是转圈圈
这不是VFP的问题，是html代码的问题，先把html搞正常了吧
你这个图我没研究过，柱型图等琢磨过几个，都是构造好html了就成功了

是的，柱型图、雷达图我都玩过几个，这个关系图是数据集，构造这个HTML就不会了

#7

dglhz2022-11-22 02:47

回复 6楼 shonken

上例这个关系图用webbrowser显示时有冲突,但用浏览器显示时就正常,试试附件调用浏览器的方法

只有本站会员才能查看附件，请登录

#8

dglhz2022-11-22 02:51

尝试使用SBrowse控件, 可正常浏览

只有本站会员才能查看附件，请登录

由于附件限制在5M以内,sb控件未能上传上来.

只有本站会员才能查看附件，请登录

[此贴子已经被作者于2022-11-22 02:54编辑过]

#9

plsword2022-11-22 08:59

回复 8楼 dglhz

sbrowser能用网盘共享一下吗？谢谢了

#10

shonken2022-11-22 09:49

以下是引用dglhz在2022-11-22 02:47:01的发言：

上例这个关系图用webbrowser显示时有冲突,但用浏览器显示时就正常,试试附件调用浏览器的方法

谢谢啦，可以运行了。我用WB控件可以显示，但跟以前一样功能缺失，在IE上显示和功能正常。不知用SBrowse控件功能是否正常，例如鼠标移到某个节点上，其他节点会隐藏。

另：再请教下，数据集和运行文件直接合并在一个HTML里可以吗

只有本站会员才能查看附件，请登录

#11

dglhz2022-11-22 16:15

回复 9楼 plsword

分卷压缩可上传

只有本站会员才能查看附件，请登录

#12

schtg2022-11-22 16:35

回复 11楼 dglhz

成功，谢谢分享！

#13

dglhz2022-11-22 16:41

回复 10楼 shonken

1:使用win10环境,调用edge内核可显示图形,但节点功能不可用

只有本站会员才能查看附件，请登录

2:sbrowser 控件功能可正常使用与浏览器中打开无异

只有本站会员才能查看附件，请登录

3:数据集和运行文件直接合并在一个HTML里可以吗?
测试结果:数据集和运行文件直接合并在一个HTML里,浏览器可正常打开
在sbrowser 控件中 loadFile 方法(读磁盘文件)也能正常打开
但loadHtml(读内存字符) 方法则不能显示

#14

dglhz2022-11-22 16:41

回复 10楼 shonken

*** sbrowser 合并 ***

LOCAL c11,c12
c11=JUSTPATH(sys(16,0))
c12=( SUBSTR(c11, AT('.CLICK',c11)+7 ))

cdata =FILETOSTR(c12+"\js11.json")
echarts=FILETOSTR(c12+"\echarts.min.js")
TEXT TO cHtml TEXTMERGE NOSHOW PRETEXT 7
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript">
  <<m.echarts>>
    var graph=<<m.cdata>>
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;
    myChart.showLoading();
  myChart.hideLoading();
  graph.nodes.forEach(function (node) {
    node.label = {
      show: node.symbolSize > 30
    };
  });
  option = {
    title: {
      text: 'Les Miserables',
      subtext: 'Default layout',
      top: 'bottom',
      left: 'right'
    },
    tooltip: {},
    legend: [
      {
        // selectedMode: 'single',
        data: graph.categories.map(function (a) {
          return a.name;
        })
      }
    ],
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        name: 'Les Miserables',
        type: 'graph',
        layout: 'none',
        data: graph.nodes,
        links: graph.links,
        categories: graph.categories,
        roam: true,
        label: {
          position: 'right',
          formatter: '{b}'
        },
        lineStyle: {
          color: 'source',
          curveness: 0.3
        },
        emphasis: {
          focus: 'adjacency',
          lineStyle: {
            width: 10
          }
        }
      }
    ]
  };
  myChart.setOption(option);
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
ENDTEXT
Strtofile(cHtml,c12+"\RelationshipChart2.html")
Thisform.wb.loadFile(c12+"\RelationshipChart2.html")
*Thisform.wb.loadHtml(cHtml)

[此贴子已经被作者于2022-11-22 16:53编辑过]

#15

shonken2022-11-22 19:46

以下是引用dglhz在2022-11-22 16:41:48的发言：

*** sbrowser 合并 ***

LOCAL c11,c12
c11=JUSTPATH(sys(16,0))
c12=( SUBSTR(c11, AT('.CLICK',c11)+7 ))

cdata =FILETOSTR(c12+"\js11.json")
echarts=FILETOSTR(c12+"\echarts.min.js")
TEXT TO cHtml TEXTMERGE NOSHOW PRETEXT 7
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript">
  <<m.echarts>>
    var graph=<<m.cdata>>
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;
    myChart.showLoading();
  myChart.hideLoading();
  graph.nodes.forEach(function (node) {
    node.label = {
      show: node.symbolSize > 30
    };
  });
  option = {
    title: {
      text: 'Les Miserables',
      subtext: 'Default layout',
      top: 'bottom',
      left: 'right'
    },
    tooltip: {},
    legend: [
      {
        // selectedMode: 'single',
        data: graph.categories.map(function (a) {
          return a.name;
        })
      }
    ],
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        name: 'Les Miserables',
        type: 'graph',
        layout: 'none',
        data: graph.nodes,
        links: graph.links,
        categories: graph.categories,
        roam: true,
        label: {
          position: 'right',
          formatter: '{b}'
        },
        lineStyle: {
          color: 'source',
          curveness: 0.3
        },
        emphasis: {
          focus: 'adjacency',
          lineStyle: {
            width: 10
          }
        }
      }
    ]
  };
  myChart.setOption(option);
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
ENDTEXT
Strtofile(cHtml,c12+"\RelationshipChart2.html")
Thisform.wb.loadFile(c12+"\RelationshipChart2.html")
*Thisform.wb.loadHtml(cHtml)

实在太感谢你了，代码及测试，尤其是分享了控件，以后图表可以展示得更生动了，谢谢你

#16

shonken2022-11-22 20:43

以下是引用dglhz在2022-11-22 16:41:48的发言：
在sbrowser 控件中 loadFile 方法(读磁盘文件)也能正常打开
但loadHtml(读内存字符) 方法则不能显示

我将之前生成的雷达图，用SBrowswe的loadFile和loadHtml都不能显示，但EDGE浏览器显示却没问题，这个是什么原因?

只有本站会员才能查看附件，请登录

#17

dglhz2022-11-23 03:18

只有本站会员才能查看附件，请登录

#18

shonken2022-11-23 13:10

以下是引用dglhz在2022-11-23 03:18:19的发言：

终于找到原因，是那个斜杠的问题，我原来的路径变量是带斜杠的，似乎必须在路径变量后加上斜杠。然后有些图表是只能用loadFile来运行，有些只能用loadHtml来运行，不知有什么规律

[此贴子已经被作者于2022-11-23 13:18编辑过]

#19

dglhz2022-11-23 19:04

loadHtml 定义加载运行文件需要指定路径,这种方法测试时相对稳定.
loadFile 理论上不用指定路径,测试上面的 RadarChart.html 有时可正常显示,有时不能显示,可能是测试时调用不同路径的测试文件, 怀疑是缓存的冲突,但找不到消除缓存的可靠方法,只是在浏览中消除缓存,然后关闭vfp,过5-10分钟后再启动vfp,运行测试 loadFile 的方法,这时又会神奇的正常了.

或者编译成exe 后,运行不会出现这种现象.

[此贴子已经被作者于2022-11-23 19:06编辑过]

#20

shonken2022-11-25 10:43

以下是引用dglhz在2022-11-23 19:04:33的发言：

loadHtml 定义加载运行文件需要指定路径,这种方法测试时相对稳定.
loadFile 理论上不用指定路径,测试上面的 RadarChart.html 有时可正常显示,有时不能显示,可能是测试时调用不同路径的测试文件, 怀疑是缓存的冲突,但找不到消除缓存的可靠方法,只是在浏览中消除缓存,然后关闭vfp,过5-10分钟后再启动vfp,运行测试 loadFile 的方法,这时又会神奇的正常了.

或者编译成exe 后,运行不会出现这种现象.

我将项目编译成exe后，可以显示图表，但SBrowser控件不刷新数据，浏览器显示没问题。
我模拟了些数据集文件在压缩包里，如果有空帮忙测试下，HTML有没有刷新数据的语句，不知跟这个有没有关系

程序代码：

只有本站会员才能查看附件，请登录

(之前上传的附件，数据上有重复的地方，图表会不显示，已更正)

[此贴子已经被作者于2022-11-25 16:04编辑过]

#21

shonken2022-11-25 16:22

以下是引用shonken在2022-11-25 10:43:16的发言：

我将项目编译成exe后，可以显示图表，但SBrowser控件不刷新数据，浏览器显示没问题。
我模拟了些数据集文件在压缩包里，如果有空帮忙测试下，HTML有没有刷新数据的语句，不知跟这个有没有关系

<script type="text/javascript" src="D:\TEMP\HUMAINES_SQL\echarts.min.js"></script>
<script type="text/javascript" src="D:\TEMP\HUMAINES_SQL\DataSet.json"></script>
<script type="text/javascript">

(之前上传的附件，数据上有重复的地方，图表会不显示，已更正)

问题解决，将数据集合并在一个HTML文件里就可以了

程序代码：

lcDataSet =FILETOSTR(LcMasterPath+"\DataSet.json")
TEXT TO cHtml TEXTMERGE NOSHOW PRETEXT 7
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="gb2312">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="<<LcMasterPath>>\echarts.min.js"></script>
  <script type="text/javascript">
    <<lcDataSet>>
    var dom = document.getElementById('container');