asp.net中采用charts控件与Highcharts的若干个问题

痴情的路灯 2015-02-11 09:13:22

背景：现在我想要做一个折线图，采用了VS中自带的Chart控件，下面我来细说下。
问题一：我先是采用Chart控件做了个折线图，想要t鼠标经过Char显示曲线的值，请问有什么方法做到！而在Highcharts中将Y轴作为起始轴，也就是从坐标（0，Y）出发。如下图所示：

问题二：在一个页面上先展示三个统计图，旁边两个是用Chart，中间一个是用Highcharts，同时将他们的Title设置字体为微软雅黑，Chart控件的可以显示，Highcharts的却是宋体！我换了一台电脑（w7系统使用360浏览器，前面的是xp，IE浏览器，也用了火狐来看），在w7上的Title的字体有改动，在xp样式修改无效，两图比较（要点击图片，小图字体差异不明显）：

代码如下：





    var chart;    //定义Chart

    $(function () {

        chart = new Highcharts.Chart({  



            chart: {

                renderTo: 'chart_line', //图表放置的容器，DIV 

                defaultSeriesType: 'line', //图表类型line(折线图), 

                zoomType: 'x'   //x轴方向可以缩放 

            },

            credits: {

                enabled: false   //右下角不显示LOGO 

            },

            title: {

                text: '库存结余状况', //图表标题 

           style: {

                    fontSize: 14,

                    fontFamily: "微软雅黑",

                    color: "#000"

                }

            },



            xAxis: {  //x轴  

                categories: ['Q0', 'Q1', 'Q2', 'Q3', 'Q4'], //x轴标签名称

                gridLineWidth: 0, //设置网格宽度为1 

                lineWidth: 2,  //基线宽度 

                labels: { y: 10}  //x轴标签位置：距X轴下方26像素             

            },

            yAxis: {  //y轴 

                title: false, //标题 

                lineWidth: 2 //基线宽度 

            },

            plotOptions: { //设置数据点 

                line: {

                    dataLabels: {

                        enabled: false  //在数据点上显示对应的数据值 

                    },

                    enableMouseTracking: true //取消鼠标滑向触发提示框 

                }

            },

            legend: {  //图例 

                layout: 'horizontal',  //图例显示的样式：水平（horizontal）/垂直（vertical） 

                //  backgroundColor: '#ffc', //图例背景色 

                align: 'center',  //图例水平对齐方式 

                verticalAlign: 'bottom',  //图例垂直对齐方式 

                borderWidth: 0,          //边框为0

                x: 10,  //相对X位移 

                y: 8,   //相对Y位移 

                floating: true //设置可浮动 

                // shadow: true  //设置阴影 

            },

            exporting: {

                enabled: false  //设置导出按钮不可用 

            },

            series: [

        {  //数据列 

            name: '目标值',

            data: [3847, 3200, 3200, 2800, 2800]

        },

        {

            name: '实际值',

            data: [3847, 3921]

        }]

        });

    });