cheng12010053008 2015-06-23 08:49 采纳率: 0%
浏览 692

open_flash_chart 通过js画饼图问题

我最近要做报表 发现open_flash_chart 挺好用，但是画饼图的时候发现饼图周围显示不了信息
js代码：

var so = new SWFObject("../actionscript/open-flash-chart.swf", "ofc", "500", "200", "9", "#FFFFFF"); //so.addVariable("data", "../data-files/data-20.txt"); so.addVariable("variables","true"); so.addVariable("title","中文,{font-size:30px; color:#000000}"); so.addVariable("pie","60,#9933CC,#000000"); so.addVariable("values","15,25,60"); so.addVariable("colours","#d01f3c,#356aa0,#C79810"); //so.addVariable("links","javascript:alert('15%25'),javascript:alert('25%25'),javascript:alert('60%25')"); so.addVariable("pie_labels","April,May,June"); //so.addVariable("tool_tip","#x_label#<br>Value: #val#%25"); so.addParam("allowScriptAccess", "always" );//"sameDomain"); so.write("my_chart");

下面是显示的图片

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-04 00:46
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    在使用Open Flash Chart时，如果想要在饼图周围显示数据信息，您可能需要根据图表的具体需求来调整。这里提供一个基本示例，说明如何在饼图中添加数据标签。

    首先，确保您的图表已经加载完毕，并且您有图表的数据集。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart with Data Labels</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="300"></canvas>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['A', 'B', 'C'],
                datasets: [{
                    label: 'Pie Chart',
                    data: [50, 10, 40],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    datalabels: {
                        color: '#fff',
                        fontColor: '#fff',
                        align: 'left',
                        formatter: function(value, context) {
                            return value + '%';
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

    在这个例子中，我们创建了一个饼状图，并设置了数据和样式。然后我们在options对象中定义了plugins.datalabels选项，其中包含了color、fontColor和align属性。这些属性分别代表数据标签的颜色、字体颜色以及对齐方式。

    您可以根据自己的需求修改这些属性以适应您的饼图。例如，你可以更改颜色、字体大小或位置等。

    注意：这个示例仅用于演示目的，实际应用中可能需要根据具体需求进行更多的定制。

    评论

报告相同问题？

  • javascript 库_您应该知道的流行javascript库
    2020-09-16 08:37
    weixin_26723981的博客 javascript 库Getting started with web development can sometimes be too overwhelming for someone new to the languages and frameworks. Huge options and a variety of languages, Frameworks, libraries, and...
  • 支持javascript的ppt软件_14款基于Javascript的数据可视化工具
    2021-01-13 04:02
    Zewei Chu的博客 俗话说，一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解，让信息发布者更加高效地展示自己的核心内容。在前端开发中，如果...AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻...
  • 9个主流的前端图表框架
    2016-09-01 13:24
    山鹰的天空的博客 Flot 为 jQuery 提供的javascript代码库. 容易使用，有特色的图表，提供交互功能(能够放大缩小数据区域等)。是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及...
  • 常用的web前端框架 --- 图形报表
    2014-01-22 11:28
    slimina的博客 Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费...HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
  • 周边花絮.js.14种流行的基于JavaScript的数据可视化工具?
    2019-09-18 10:40
    chunnidong6528的博客 简单介绍: 俗话说，一图胜千言。...在前端开发中，如果缺少合适工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名...
  • 推荐 14 款基于 JavaScript 的数据可视化工具
    2016-11-21 16:56
    abcdef_fedcba的博客 在前端开发中，如果缺少合适 工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。AnyChart链接...
  • 14款基于javascript的数据可视化工具
    2016-01-18 10:23
    chenfujian87的博客 在前端开发中，如果缺少合适工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。An...
  • Fusioncharts等主流的9个前端图表框架 - 烟雨博客
    2011-09-28 16:14
    iteye_3751的博客 Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用，有特色的图表，提供交互功能(能够放大缩小数据区域等)。是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大...
  • Web-拾贝
    2018-03-10 13:45
    oscar999的博客 JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的...
  • 基于Java的通用图表接口设计与实现
    2014-02-26 18:00
    iteye_8065的博客 现如今，互联网上充斥着各式各样的图表产品，有基于Java实现的（如JfreeChart）、有基于Javascript实现的（如highcharts和国内的ichartjs）、还有基于Flash实现的（如fusioncharts）。那么不同公司根据自己的需求，...
  • 没有解决我的问题, 去提问