<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>
      全国66市町村 情報通信業 特化係数
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-3d.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>

  <style>
  #container {
    height: 600px;
    width: 600px;
    margin: 0 auto;
    position: relative; top: 50px;
  }
  </style>
</head>

  <body>
    <button id="button1" style="background-color:#FF0000; position: relative; top: 10px">高梁川流域</button>
    <button id="button2" style="background-color:#00FF00; position: relative; top: 10px">岡山県内</button>
    <button id="button3" style="background-color:#00FFFF; position: relative; top: 10px">北海道・東北</button>
    <button id="button4" style="background-color:#0000FF; position: relative; top: 10px">関東</button>
    <button id="button5" style="background-color:#FF00FF; position: relative; top: 10px">中部</button>
    <button id="button6" style="background-color:#808000; position: relative; top: 10px">近畿</button>
    <button id="button7" style="background-color:#800080; position: relative; top: 10px">中国・四国</button>
    <button id="button8" style="background-color:#808080; position: relative; top: 10px">九州</button>
  
    <div id="container"></div>
  </body>

  <script type="text/javascript">

  $(function () {

      // Give the points a 3D feel by adding a radial gradient
      Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
          return {
              radialGradient: {
                  cx: 0.4,
                  cy: 0.3,
                  r: 0.5
              },
              stops: [
                  [0, color],
                  [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
              ]
          };
      });

      // Set up the chart
      var chart = new Highcharts.Chart({
        credits  : {enabled: false},
        exporting: {enabled: false},
        chart: {
              renderTo: 'container',
              margin: 100,
              marginBottom: 300,
              type: 'scatter',
              options3d: {
                  enabled: true,
                  alpha: 0,
                  beta: 55,
                  depth: 250,
                  viewDistance: 5,
                  fitToPlot: false,
                  frame: {
                      bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                      back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                      side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                  }
              }
          },
          title: {text: ''},
//          subtitle: {text: ''},
          plotOptions: {
              scatter: {
                  width: 10,
                  height: 10,
                  depth: 10
              }
          },
          yAxis: {
            tickPositions: [0, 0.2, 0.4, 0.6, 0.8, 1],
              min: 0,
              max: 1,
              title: {text: 'y:労働生産性'}
          },
          xAxis: {
              tickPositions: [0, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6],
              min: 0,
              max: 1.6,
              title: {text: 'x:付加価値額'}
          },
          zAxis: {
            tickPositions: [0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2.0],
              min: 0,
              max: 2,
              title: {text: 'z:従業員数：事業所'}
          },
          legend: {enabled:false},

          /*      高梁川流域    255, 0, 0    赤 #FF0000
                  岡山県内　    0, 255, 0    緑 #00FF00
                  北海道・東北  0,255, 255   水色（シアン） #00FFFF
                  関東　       0, 0, 255    青 #0000FF
                  中部        255, 0, 255   赤紫（マゼンタ） #FF00FF
                  近畿        128,128,0     黄土色 #808000
                  中国・四国   128,0,128     紫 #800080
                  九州        128,128,128   灰色 #808080 */

          <!-- "circle" ●,"diamond" ♦,"square" ■,"triangle" ▲,"triangle-down" ▼ -->
          series: [

          // 高梁川流域 赤 #FF0000
          {name: '倉敷市',   data: [[ 0.11, 	0.59, 0.19]], color:'#FF0000', marker: {symbol: 'circle'}},
          {name: '笠岡市',   data: [[ 0.09, 	0.62, 0.11]], color:'#FF0000', marker: {symbol: 'circle'}},
          {name: '井原市',   data: [[ 0.07, 	0.64, 0.12]], color:'#FF0000', marker: {symbol: 'circle'}},
          {name: '総社市',   data: [[ 0.04, 	0.36, 0.09]], color:'#FF0000', marker: {symbol: 'circle'}},
          {name: '新見市',   data: [[ 0.05, 	0.31, 0.14]], color:'#FF0000', marker: {symbol: 'circle'}},
          {name: '浅口市',   data: [[ 0.04, 	0.23, 0.07]], color:'#FF0000', marker: {symbol: 'circle'}},
          {name: '里庄町',   data: [[ 0.08, 	0.31, 0.15]], color:'#FF0000', marker: {symbol: 'circle'}},

          // 岡山県内 緑 #00FF00
          {name: '岡山市',   data: [[ 0.62, 	0.65, 0.96]], color:'#00FF00', marker: {symbol: 'circle'}},
          {name: '津山市',   data: [[ 0.31, 	0.63, 0.25]], color:'#00FF00', marker: {symbol: 'circle'}},
          {name: '備前市',   data: [[ 0.23, 	0.20, 0.40]], color:'#00FF00', marker: {symbol: 'circle'}},
          {name: '真庭市',   data: [[ 0.08, 	0.43, 0.13]], color:'#00FF00', marker: {symbol: 'circle'}},
          {name: '和気町',   data: [[ 0.01, 	0.09, 0.04]], color:'#00FF00', marker: {symbol: 'circle'}},
          {name: '玉野市',   data: [[ 0.13, 	0.37, 0.36]], color:'#00FF00', marker: {symbol: 'circle'}},

          // 海道・東北 水色（シアン） #00FFFF
          {name: '札幌市',   data: [[ 1.04, 	0.68, 1.33]], color:'#00FFFF', marker: {symbol: 'circle'}},
          {name: '青森市',   data: [[ 0.70, 	0.60, 0.99]], color:'#00FFFF', marker: {symbol: 'circle'}},
          {name: '盛岡市',   data: [[ 0.96, 	0.67, 1.07]], color:'#00FFFF', marker: {symbol: 'circle'}},
          {name: '仙台市',   data: [[ 0.91, 	0.58, 1.47]], color:'#00FFFF', marker: {symbol: 'circle'}},
          {name: '山形市',   data: [[ 0.35, 	0.59, 0.70]], color:'#00FFFF', marker: {symbol: 'circle'}},
          {name: '福島市',   data: [[ 0.51, 	0.59, 0.71]], color:'#00FFFF', marker: {symbol: 'circle'}},

          // 関東 青 #0000FF
          {name: '水戸市',   data: [[ 0.56, 	0.53, 0.97]], color:'#0000FF', marker: {symbol: 'circle'}},
          {name: '宇都宮市',  data: [[ 0.59, 	0.66, 0.75]], color:'#0000FF', marker: {symbol: 'circle'}},
          {name: '前橋市',   data: [[ 0.64, 	0.71, 0.74]], color:'#0000FF', marker: {symbol: 'circle'}},
          {name: 'さいたま市', data: [[ 0.44, 	0.60, 0.81]], color:'#0000FF', marker: {symbol: 'circle'}},
          {name: '千葉市',   data: [[ 0.55, 	0.89, 1.06]], color:'#0000FF', marker: {symbol: 'circle'}},
          {name: '藤沢市',   data: [[ 0.17, 	0.40, 0.29]], color:'#0000FF', marker: {symbol: 'circle'}},

          // 中部 赤紫（マゼンタ） #FF00FF
          {name: '新潟市',   data: [[ 0.46, 	0.62, 0.78]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '富山市',   data: [[ 0.51, 	0.61, 0.88]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '金沢市',   data: [[ 0.90, 	0.69, 1.15]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '福井市',   data: [[ 0.64, 	0.70, 0.76]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '甲府市',   data: [[ 0.56, 	0.64, 0.81]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '長野市',   data: [[ 0.82, 	0.71, 1.18]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '岐阜市',   data: [[ 0.37, 	0.70, 0.53]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '大垣市',   data: [[ 0.40, 	0.65, 0.77]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '静岡市',   data: [[ 0.49, 	0.64, 0.88]], color:'#FF00FF', marker: {symbol: 'circle'}},
          {name: '名古屋市',  data: [[ 0.80, 	0.83, 1.51]], color:'#FF00FF', marker: {symbol: 'circle'}},

          // 近畿 黄土色 #808000
          {name: '津市',    data: [[ 0.55, 	0.64, 0.81]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '大津市',   data: [[ 0.33, 	0.48, 0.72]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '京都市',   data: [[ 0.46, 	0.67, 0.67]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '精華町',   data: [[ 0.43, 	0.49, 0.45]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '神戸市',   data: [[ 0.42, 	0.59, 0.79]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '西宮市',   data: [[ 0.43, 	0.55, 0.50]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '奈良市',   data: [[ 0.22, 	0.55, 0.41]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '生駒市',   data: [[ 0.90, 	0.82, 0.42]], color:'#808000', marker: {symbol: 'circle'}},
          {name: '和歌山市',  data: [[ 0.18, 	0.36, 0.49]], color:'#808000', marker: {symbol: 'circle'}},

          // 中国・四国 紫 #800080
          {name: '鳥取市',   data: [[ 0.40, 	0.46, 0.64]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '米子市',   data: [[ 0.52, 	0.65, 0.43]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '松江市',   data: [[ 0.69, 	0.82, 0.85]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '広島市',   data: [[ 0.71, 	0.71, 1.10]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '呉市',    data: [[ 0.35, 	0.64, 0.16]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '福山市',   data: [[ 0.17, 	0.43, 0.36]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '山口市',   data: [[ 0.21, 	0.71, 0.66]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '徳島市',   data: [[ 1.10, 	0.98, 0.84]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '高松市',   data: [[ 0.75, 	0.85, 0.96]], color:'#800080', marker: {symbol: 'circle'}},
          {name: '松山市',   data: [[ 0.95, 	0.54, 1.14]], color:'#800080', marker: {symbol: 'circle'}},

          // 九州 灰色 #808080
          {name: '北九州市',  data: [[ 0.41, 	0.54, 0.53]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '福岡市',   data: [[ 1.14, 	0.60, 1.97]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '佐賀市',   data: [[ 0.35, 	0.38, 0.77]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '長崎市',   data: [[ 0.35, 	0.46, 0.65]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '熊本市',   data: [[ 0.54, 	0.69, 0.81]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '大分市',   data: [[ 0.55, 	0.58, 0.87]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '宮崎市',   data: [[ 0.66, 	0.67, 1.04]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '延岡市',   data: [[ 0.44, 	0.69, 0.33]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '鹿児島市',  data: [[ 0.53, 	0.69, 0.76]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '那覇市',   data: [[ 1.54, 	0.82, 1.61]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '宜野湾市',  data: [[ 0.81, 	0.45, 1.33]], color:'#808080', marker: {symbol: 'circle'}},
          {name: '浦添市',   data: [[ 0.53, 	0.46, 1.96]], color:'#808080', marker: {symbol: 'circle'}}
        ]

      });

      // Add mouse events for rotation
      $(chart.container).bind('mousedown.hc touchstart.hc', function (eStart) {
          eStart = chart.pointer.normalize(eStart);

          var posX = eStart.pageX,
              posY = eStart.pageY,
              alpha = chart.options.chart.options3d.alpha,
              beta = chart.options.chart.options3d.beta,
              newAlpha,
              newBeta,
              sensitivity = 5; // lower is more sensitive

          $(document).bind({
              'mousemove.hc touchdrag.hc': function (e) {
                  // Run beta
                  newBeta = beta + (posX - e.pageX) / sensitivity;
                  chart.options.chart.options3d.beta = newBeta;

                  // Run alpha
                  newAlpha = alpha + (e.pageY - posY) / sensitivity;
                  chart.options.chart.options3d.alpha = newAlpha;

                  chart.redraw(false);
              },
              'mouseup touchend': function () {
                  $(document).unbind('.hc');
              }
          });
      });

      /* グループ単位での表示OFF/ON
      /*  button1 高梁川流域:0-6
          button2 岡山県内:7-12
          button3 北海道・東北:13-18
          button4 関東:19-24
          button5 中部:25-34
          button6 近畿:35-43
          button7 中国・四国:44-53
          button8 九州:54-65 */

         $('#button1').click(function () {
           var chart = $('#container').highcharts();
           for(var i=0 ; i<=6 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button2').click(function () {
           var chart = $('#container').highcharts();
           for(var i=7 ; i<=12 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button3').click(function () {
           var chart = $('#container').highcharts();
           for(var i=13 ; i<=18 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button4').click(function () {
           var chart = $('#container').highcharts();
           for(var i=19 ; i<=24 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button5').click(function () {
           var chart = $('#container').highcharts();
           for(var i=25 ; i<=34 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button6').click(function () {
           var chart = $('#container').highcharts();
           for(var i=35 ; i<=43 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button7').click(function () {
           var chart = $('#container').highcharts();
           for(var i=44 ; i<=53 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

         $('#button8').click(function () {
           var chart = $('#container').highcharts();
           for(var i=54 ; i<=65 ; i++){
             if (chart.series[i].visible) {chart.series[i].hide();} else {chart.series[i].show();}
           }
         });

  });
      </script>
</html>
