hightcharts图表简单使用

来源：互联网发布：程序化交易软件华泰编辑：程序博客网时间：2024/05/02 06:46
@{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>PriceLclLog</title>     @Html.Partial("_JsCss")    <script src="~/Scripts/Custom/highcharts.js"></script></head><body>        <div id="tb" style="height: auto">        <h>起始日期：</h>        <input style="width: 100px;" class="Wdate" id="Starttime" name="Starttime" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" />        <h>截止日期：</h>        <input style="width: 100px;" class="Wdate" id="Endtime" name="Endtime" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" />        <input onclick="searchClick();" type="button" value="检索" />    </div>      <div id="container" style="min-width: 400px; height: 300px; margin: 0 auto">      </div>       <div id="container2" style="min-width: 400px; height: 300px; margin: 0 auto">      </div>       <div id="container3" style="min-width: 400px; height: 300px; margin: 0 auto">      </div>  </body></html><script>    $(function () {                $.ajax({            url: '/CompanysRepositoryLog/GetTongjiByCompanys',            type: "post",            success: function (data) {                createchartsdata(data);                createchartsdata2(data);            }        });    });    function createchartsdata(data)    {        var categories = [];        var cdata = [];        $.each(data.rows, function (index, item) {            if (index <= 25) {                categories.push(item.Country);                cdata.push(item.Count);            }        });        createcharts(categories, cdata);    }    function createchartsdata2(data) {        var categories = [];        var cdata = [];        $.each(data.rows, function (index, item) {            if (index > 25 && index <= 50) {                categories.push(item.Country);                cdata.push(item.Count);            }        });        createcharts2(categories, cdata);    }    function createcharts(categories,_data)    {        $('#container').highcharts({            chart: {                type: 'column'            },            title: {                text: '海外直客热点图',                labels: {                    style: {                        color: '#000'                    },                    color: '#000'                }            },            //subtitle: {            //    text: '5月份'            //},            xAxis: {                categories: categories            },            yAxis: {                min: 0,                title: {                    text: '点击数量'                }            },            tooltip: {                headerFormat: '<span style="font-size:10px">{point.key}</span>',                pointFormat: '' +                    '',                footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f} 次</b></td></tr></tbody></table>',                shared: true,                useHTML: true            },            plotOptions: {                column: {                    pointPadding: 0.2,                    borderWidth: 0                }            },            series: [{                name: '国家',                data: _data,                dataLabels: { //显示数值                    enabled: true,                    color: '#666666'                }            }            ]        });    }    function createcharts2(categories, _data) {        var colors = Highcharts.getOptions().colors;        $('#container2').highcharts({            chart: {                type: 'column'            },            title: {                text: '海外直客热点图'            },            //subtitle: {            //    text: '5月份'            //},            xAxis: {                categories: categories            },            yAxis: {                min: 0,                title: {                    text: '点击数量'                }            },            tooltip: {                headerFormat: '<span style="font-size:10px">{point.key}</span>',                pointFormat: '' +                    '',                footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y:.1f} 次</b></td></tr></tbody></table>',                shared: true,                useHTML: true            },            plotOptions: {                column: {                    pointPadding: 0.2,                    borderWidth: 0                }            },            series: [{                name: '国家',                data: _data,                dataLabels: {                    enabled: true,                    color: '#666666'                }                //color: colors[2]  //修改柱状图颜色            }            ]        });    }</script>
0 0