好用的图表框架

2019独角兽企业重金招聘Python工程师标准>>>

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