Highchart线未显示

时间:2018-03-29 03:40:03

标签: javascript html highcharts

我想在每个月的每一天制作贷款总计图表,所以我制作这样的脚本,但是折线图没有显示

chart: { 
            renderTo: 'lineChart',
            type: 'line',
        },

        title: {
            text: 'Total Pinjaman Bulan Ini'
        },

        xAxis: {
            type: 'datetime',
            min: Date.UTC((new Date()).getFullYear(), (new Date()).getMonth(), 1),
            max: Date.UTC((new Date()).getFullYear(), (new Date()).getMonth()+1, 0),
            tickInterval: 24 * 3600 * 1000,

            labels: {
              step: 5,
              style: {
                fontSize: '10px',
                fontFamily: 'Arial,sans-serif'
              }
            }
        },

        yAxis: {            
            title: {
                text: 'Total Pinjaman'
            }
        },

        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },

        series: [{
            name: 'Loan',
            data: [12, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]

2 个答案:

答案 0 :(得分:1)

我已经解决了我自己的代码

 var date = new Date();
      var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
      var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);

      var lastDayWithSlashes = (lastDay.getDate())

      var chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'lineChart',
            type: 'line'
        },

        title: {
            text: 'Total Pinjaman Bulan Ini'
        },
        xAxis: {

            min: 1,
            max: lastDayWithSlashes,
        },

答案 1 :(得分:0)

使用pointStartpointInterval

更新您的系列
  series: [{
    name: 'Loan',
    pointStart: Date.UTC((new Date()).getFullYear(), (new Date()).getMonth(), 1),
    pointInterval: 24 * 3600 * 1000,
    data: [12, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }]



Highcharts.chart('container', {

  chart: {
    renderTo: 'lineChart',
    type: 'line',
  },

  title: {
    text: 'Total Pinjaman Bulan Ini'
  },

  xAxis: {
    type: 'datetime',
    min: Date.UTC((new Date()).getFullYear(), (new Date()).getMonth(), 1),
    max: Date.UTC((new Date()).getFullYear(), (new Date()).getMonth() + 1, 0),
    tickInterval: 24 * 3600 * 1000,

    labels: {
      step: 5,
      style: {
        fontSize: '10px',
        fontFamily: 'Arial,sans-serif'
      }
    }
  },

  yAxis: {
    title: {
      text: 'Total Pinjaman'
    }
  },

  plotOptions: {
    line: {
      dataLabels: {
        enabled: true
      },
       enableMouseTracking: false
    }
  },

  series: [{
    name: 'Loan',
    pointStart: Date.UTC((new Date()).getFullYear(), (new Date()).getMonth(), 1),
    pointInterval: 24 * 3600 * 1000,
    data: [12, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
&#13;
&#13;
&#13;