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

第 11 楼

得分:0

回复 9楼 plsword

分卷压缩可上传

sbrow.part1.rar (4.8 MB)

sbrow.part2.rar (1.47 MB)

第 12 楼

得分:0

回复 11楼 dglhz

成功，谢谢分享！

第 13 楼

得分:0

回复 10楼 shonken

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

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

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

第 14 楼

得分:20

回复 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 楼

得分: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)

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

第 16 楼

得分:0

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

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

RadarChart.zip (1002 Bytes)

第 17 楼

得分:0

第 18 楼

得分: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编辑过]

第 19 楼

得分:0

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

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

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

第 20 楼

得分: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编辑过]