HighCharts 차트 그리기

4958 단어

    <div id="TradeMoney"></div>
    <script>
        $(function () {
            initData();
        });

        function initData() {

           var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'TradeMoney',          // 
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    defaultSeriesType: 'line',
                    reflow: true // true  
                },
                title: {
                    text: ' '
                },
                subtitle: {
                    text: ''
                },
                xAxis: {//X 
                    categories: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09', '2015-10'],
                    labels: {
                        rotation: -45, // 
                        align: 'right',
                        style: { font: 'normal 13px  ' }
                    }
                },
                yAxis: {//Y 
                    title: {
                        text: ' / '
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true// title
                    }
                },
                series: [{
                    name: ' ',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 19.4, 0]

                }, {
                    name: ' ',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 10.3, 0]

                }, {
                    name: ' ',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                }]
            });
        }
    </script>

참고:
1. 데이터 형식이 일치해야 한다. X축 ['a','b','c','d'], Y축 [0,0,0,3], 백엔드에서 문자열 결합value='['+...+']'를 하고 백엔드에서 대상 eval(value)로 변환할 수 있다.
2、highcharts.js버전은 반드시 JQuery와 대응해야 합니다. 그렇지 않으면 처음으로 데이터가 불러오고 접선이 없습니다. 창을 드래그해서 크기를 바꾼 후에야 접선이 표시됩니다. 비참합니다.
3. 도표를 표시하는 div 용기의 높이와 너비가 지정되지 않으면 기본적으로 400*400입니다.

좋은 웹페이지 즐겨찾기