JavaScript意外标识符高图

Question

Hi Guys I'm having problem with this JavaScript Code With High charts. The bottom chart doesn't show the months, it shows seconds, nevermind the y axis because it is static. What I care about is the setOptions and the xAxis of each chart. I tried to use the setOptions function, calling it so that it may solve the problem but it didn't.

<div id="barChart">
</div>
<div id="barChartPerDay">
</div>
<script type="text/javascript">
  $(function() {
    chart1()
    chart2()
  })

  function chart1() {
    var doorData = 0;
    var frameData = 0;
    var screenData = 0;
    var othersData = 0;
    $(function() {
      Highcharts.setOptions({
        chart: {
          type: 'column'
        },
        title: {
          text: 'Units of Doors, Frames and Screens'
        },
        subtitle: {
          text: 'Manufactured within September - 2018'
        },
        xAxis: {
          categories: ['September - 2018'],
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Units Per Month'
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        }
      });
      var chart1 = new Highcharts.Chart({
        chart: {
          renderTo: 'barchart',
        },
        series: [{
          name: 'Door',
          data: [doorData]
        }, {
          name: 'Frame',
          data: [frameData]
        }, {
          name: 'Screen',
          data: [screenData]
        }, {
          name: 'Others',
          data: [othersData]
        }]
      });
    });
  }

  function chart2() {
    var doorDataPerDay = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var frameDataPerDay = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var screenDataPerDay = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var othersDataPerDay = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    $(function() {
      Highcharts.setOptions({
        chart: {
          type: 'column'
        },
        title: {
          text: 'Units of Doors, Frames and Screens'
        },
        subtitle: {
          text: 'Manufactured within September - 2018'
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            day: '%e of %b'
          },
          crosshair: true,
          tickInterval: 24 * 3600 * 1000,
          labels: {
            rotation: -45,
            align: 'right'
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Units Per Month'
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        }
      });
      var chart2 = new Highcharts.Chart({
        chart: {
          renderTo: 'barChartPerDay',
        },
        series: [{
          name: 'Door',
          data: doorDataPerDay,
          pointStart: Date.UTC(2018, 8, 1),
          pointEnd: Date.UTC(2018, 8, 31),
          pointInterval: 24 * 3600 * 1000,
          color: '#95d4f3'
        }, {
          name: 'Frame',
          data: frameDataPerDay,
          pointStart: Date.UTC(2018, 8, 1),
          pointEnd: Date.UTC(2018, 8, 31),
          pointInterval: 24 * 3600 * 1000,
          color: '#c7f464'
        }, {
          name: 'Screen',
          data: screenDataPerDay,
          pointStart: Date.UTC(2018, 8, 1),
          pointEnd: Date.UTC(2018, 8, 31),
          pointInterval: 24 * 3600 * 1000,
          color: '#ff6b6b'
        }, {
          name: 'Others',
          data: othersDataPerDay,
          pointStart: Date.UTC(2018, 8, 1),
          pointEnd: Date.UTC(2018, 8, 31),
          pointInterval: 24 * 600 * 1000,
          color: '#008000'
        }]
      })
    });
  }
</script>

Any help would be appreciated.

Answer 1

"You should apply the options to the charts. Not with setOptions, as that applies options to all charts."

This one is answered already.