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

楼主

已结贴√ 问题点数：20 回复次数：8

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

网址见：https://echarts.

试做了下，材料见压缩包

graph.zip (631.09 KB)

搜索更多相关主题的帖子: html　VFP　压缩包　 graph　关系图　

第 2 楼

得分:0

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

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

就是生成的HTML没用

第 3 楼

得分:0

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

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

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

第 4 楼

得分:0

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

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

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

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

第 5 楼

得分:0

以下是引用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)

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

第 6 楼

得分:0

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

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

RadarChart.zip (1002 Bytes)

第 7 楼

得分:0

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

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

  
        <script type="text/javascript" src="<<c12>>\echarts.min.js"></script>

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

第 8 楼

得分:0

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

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

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

我将项目编译成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">

RelationshipChart3 (1).zip (4.38 KB)

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

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

第 9 楼

得分:0

以下是引用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');