好用的图表框架

charts

https://github.com/frappe/charts#installation

文档:https://frappe.io/charts

<div id="chart"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-charts/1.1.0/frappe-charts.min.iife.js"></script>
<script>
const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am","12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"],
    datasets: [
        {
            name: "Some Data", type: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        }
    ]
}

const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "test Pie",
    data: data,
    type: 'pie', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

</script>

 

ini_set('memory_limit','468M');

$models=unserialize( file_get_contents("mickelfeng.json"));

$template=<<<EOF
<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-charts/1.1.0/frappe-charts.min.iife.js"></script>
<script>
const data = {
    labels: [%s],
    datasets: [
        {
            name: "Some Data", type: "bar",
            values: [%s]
        }
    ]
}
const chart = new frappe.Chart("#chart", {  // or a DOM element,
                                            // new Chart() in case of ES6 module with above usage
    title: "test Pie",
    data: data,
    type: 'pie', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

</script>
EOF;
#print_r($models);
$a=[];
$b=[];
foreach($models as $key=>$value){
    if($key=="  ")continue;
    $a[]=$key;
    $b[]=$value;
}

$model_string="\"".implode("\",\"",$a)."\"";
$count_string=implode(",",$b);

echo sprintf($template,$model_string,$count_string);

 

转载于:https://my.oschina.net/mickelfeng/blog/2872820

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值