3週間前に投稿

Highcharts の 3D charts で描画してみた

この記事は約 12 分で読めます。

4.5

「6歳未満の子どもをもつ夫婦の育児・家事関連時間 国際比較」の資料を基に Highcharts の 3D charts で描画して記事を書いてみました。以下がその記事になります。

3D charts を使った記事

男性の家事・育児が日本の少子化を救う
夫が休日に家事・育児をするかしないかで第2子が生まれるかが決まる?

男性の家事・育児が日本の少子化を救う
子供がいる夫婦における夫の休日の家事・育児時間が増えると第2子以降の出生率が大幅に増加

2018_内閣府男性家事育児参画ポスター_A4_1221 (gender.go.jp)

休日の男性の家事・育児時間が0の場合、第2子以降の出生状況が10%、休日の男性の家事・育児時間が2~4時間になると59.2%まで上昇し、6時間を超えると87.1%に増加します。この「休日」というのがポイント、仕事の無い休日に何をして過ごすかが、第2子が生まれるかどうかに大きく影響するようです。

男性の暮らし方・意識が変われば日本も変わる
1日あたり150分が目標!

日本人男性も世界レベルの家事メンに!
(参考)
1.男性の家事関連時間を諸外国と比較してみると、日本は先進国中最低 (83分「1.23時間」)の水準。
2.6歳未満の子どもを持つ日本人男性の1日あたりの育児・家事関連時間を83分から150分に。

夫の育児時間と出生との関係について、厚生労働省は「子供とのふれあいが楽しいと感じ、新たに子供が欲しなるのでは」と分析しているそうですが、「第1子出生後に妻の子育ての不安や悩み・育児負担感が大きいほど第2子出生が起きにくい」との調査結果もあるので、第1子出生後の妻の子育ての不安や悩み・育児負担感を夫がいかにサポートしてあげるかが鍵となり、夫が休日に家事・育児をするかしないかと大きく結びついているのかな?と思います。

3D charts のソースコード

HTML

3D column with stacking and grouping

<div id="kajimen">
  <div class="highcharts-description">日本人男性も世界レベルの家事メンに</div>
  <div id="container"></div>
  <div class="description-bottom"> (参考)<br> <span>A.</span>男性の暮らし方・意識が変われば日本も変わる。<br> <span>B.</span>男性の家事関連時間を諸外国と比較してみると、日本は先進国中最低 (83分「1.23時間」)の水準。<br> <span>C.</span>6歳未満の子どもを持つ日本人男性の1日あたりの育児・家事関連時間を83分から150分に。</div>
</div>

3D Cylinder

<div id="container_2"></div>

JavaScript (JS)

3D column with stacking and grouping

var categories = ["日本", "米国", "英国", "フランス", "ドイツ", "スウェーデン", "ノルウェー"];
Highcharts.chart('container', {
  chart: {
    type: 'column',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 10,
      viewDistance: 25,
      depth: 40
    },
  },
  credits: {
    enabled: true,
    text: 'Highcharts.com',
    href: 'javascript:window.open("https://www.highcharts.com/", "_blank", "noopener noreferrer")'
  },
  title: {
    text: 'Japanese men also become world-class housework men',
    style: {
      fontSize: "16px"
    }
  },
  subtitle: {
    text: '参照: <a href="https://www.gender.go.jp/public/conceptposter/" style="text-decoration:none;" target="_blank" rel="noopener noreferrer">https://www.gender.go.jp/public/conceptposter/</a>',
    style: {
      "fontSize": "10px"
    }
  },
  legend: {
    labelFormatter: function () {
      return '<span style="color: ' + this.color + '">' + this.name + '</span>';
    }
  },
  xAxis: {
    categories: categories,
    labels: {
      skew3d: true,
      style: {
        fontSize: '14px'
      }
    }
  },
  yAxis: {
    minorTickInterval: '1.23',
    labels: {
      formatter: function () {
        if (this.isFirst) {
          return Highcharts.dateFormat("時間", this.value)
        }
        return this.axis.defaultLabelFormatter.call(this) + "時間"
      }
    },
    plotBands: [{
      color: 'rgba(255,255,255,0)',
      from: 1.8,
      to: 4,
      zIndex: 5,
      label: {
        text: '1日あたり150分が目標',
        align: 'left',
        x: 0,
        y: -25,
        style: {
          color: '#332600',
          fontWeight: 'bold',
        }
      }
    }],
    plotLines: [{
      value: 1.23,
      color: 'rgba(255,0,0,0.5)',
      width: 1,
      zIndex: 5,
      label: {
        formatter: function () {
          return 'Minimum time : ' + '<span style="color:#f00"><b>' + this.options.value + "時間</b></span>";
        },
        align: 'right',
        x: 0,
        y: -45,
      }
    }],
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Related time',
      skew3d: true
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px"><b>{point.key}</b></span><br/>',
    pointFormat: 'Total: {point.stackTotal} 時間<br/><span style="color:{series.color}">{series.name}: </span><b>{point.y} 時間</b>'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      depth: 40
    }
  },
  exporting: {
    buttons: {
      contextButton: {
        menuItems: ["printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG", "separator", "viewData"]
      }
    }
  },
  series: [{
    name: '1日あたりの目標',
    data: [0.27, null, null, null, null, null, null],
    stack: 'male',
    color: "#a0522d",
  }, {
    name: '夫の家事・育児関連時間',
    data: [0.74, 1.9, 1.46, 1.9, 2.41, 2.14, 1.99],
    stack: 'male',
    color: "#3e5a99",
  }, {
    name: 'うち育児の時間',
    data: [0.49, 1.2, 1, 0.4, 0.59, 1.07, 1.13],
    stack: 'male',
    color: "#878c91",
  }, {
    name: '妻の家事・育児関連時間',
    data: [3.89, 3.22, 3.87, 3.92, 3.93, 3.19, 3.09],
    stack: 'female',
    color: "#f4bd6b",
  }, {
    name: 'うち育児の時間',
    data: [3.45, 2.18, 2.22, 1.57, 2.18, 2.1, 2.17],
    stack: 'female',
    color: "#c8a65d",
  }],
});

3D Cylinder

Highcharts.chart('container_2', {
  chart: {
    type: 'cylinder',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 10,
      depth: 60,
      viewDistance: 100
    }
  },
  title: {
    text: '男性の家事・育児が日本の少子化を救う',
    style: {
      "fontSize": "14px"
    }
  },
  subtitle: {
    text: '参照: <a href="https://www.gender.go.jp/public/conceptposter/" style="text-decoration:none;" target="_blank" rel="noopener noreferrer">https://www.gender.go.jp/public/conceptposter/</a>',
    style: {
      "fontSize": "10px"
    }
  },
  xAxis: {
    title: {
      text: '夫の休日の家事・育児時間',
      skew3d: true
    },
    categories: ['なし', '2時間未満', '2~4時間', '4~6時間', '6時間以上'],
    labels: {
      skew3d: true,
      style: {
        fontSize: '12px'
      }
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: '第2子以降の出生状況',
      skew3d: true
    },
    labels: {
      format: '{value} %'
    }
  },
  tooltip: {
    valueSuffix: ' %'
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      depth: 25,
      colorByPoint: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '{y} %',
        style: {
          color: '#606060',
          fontSize: '10px'
        }
      }
    }
  },
  series: [{
    name: '出生率 (%)',
    data: [10.0, 32.8, 59.2, 79.7, 87.1]
  }]
});

CSS

3D column with stacking and grouping

#kajimen {
  max-width: 800px;
  margin: 0 auto;
}

.highcharts-description {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #332628;
  width: 100%;
}

.description-bottom {
  font-size: 10px;
  color: #666;
  width: 100%;
  margin-top: 0;
  padding: .5em;
  text-indent: -1em;
}

.description-bottom span {
  display: inline-block;
  width: 2px;
}

最後に

かなり細部にこだわりましたが、
解る方には解る」と思います。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Highcharts の 3D charts で描画してみた