纯JavaScript图表组件dhtmlxChart画统计图整理

最新推荐文章于 2019-09-29 18:09:44 发布

工藤新一OL

最新推荐文章于 2019-09-29 18:09:44 发布

阅读量230

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41760419/article/details/98870885

版权

本文介绍了如何利用JavaScript库dhtmlxChart创建柱状图和饼状图。通过引入dhtmlx的CSS和JS文件，然后定义数据和配置选项，可以轻松在网页上显示统计图表。示例中展示了柱状图和饼状图的实现方法，包括数据解析和图表样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面上引用dhtmlx的相关js脚本和css文件即可完成安装：

aspx页面：

js页面:

柱状图：

var barChart2;
function loadZz() {
var data = [
          { name:"故障单",number:12},
          { name:"询问单"，number:15},
          { name:"确认单"，number:15},
          ];

    barChart2 = new dhtmlXChart({
        view: "bar",
        container: "divZz",
        label: "#number#",
        value: "#number#",
        color: "#63B8FF", //"color" property in data
        border: false,
        barWidth: 40,
        alpha: 0.2,
        radius: 0,
        xAxis: {
            template: "#name#"
        },
        yAxis: {
            start: 0,
            end: 100,
            step: 10,
            template: function (obj) {
                return (obj % 20 ? "" : obj)
            }
        }
    });
    barChart2.parse(data, "json");
}