ハイチャート-散布図

以下は、基本的な散布図の例です。

link：/highcharts/highcharts_configuration_syntax [Highcharts設定構文]の章でチャートを描画するために使用される設定はすでに見ました。

基本的な散布図の例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

チャート

散布図ベースのチャートタイプを構成します。 chart.type は、チャートのシリーズタイプを決定します。ここで、デフォルト値は「line」です。

チャートを構成してズーム可能にします。 chart.zoomType は、ユーザーがマウスをドラッグしてズームできる次元を決定します。ここで、可能な値はx、yまたはxyです。

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

例

*_highcharts_scatter_basic_*

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var chart = {
               type: 'scatter',
               zoomType: 'xy'
            };
            var title = {
               text: 'Height Versus Weight of 507 Individuals by Gender'
            };
            var subtitle = {
               text: 'Source: Heinz  2003'
            };
            var xAxis = {
               title: {
                  enabled: true,
                  text: 'Height (cm)'
               },
               startOnTick: true,
               endOnTick: true,
               showLastLabel: true
            };
            var yAxis = {
               title: {
                  text: 'Weight (kg)'
               }
            };
            var legend = {
               layout: 'vertical',
               align: 'left',
               verticalAlign: 'top',
               x: 100,
               y: 70,
               floating: true,
               backgroundColor: (
                  Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                  '#FFFFFF',
               borderWidth: 1
            }
            var plotOptions = {
               scatter: {
                  marker: {
                     radius: 5,
                     states: {
                        hover: {
                           enabled: true,
                           lineColor: 'rgb(100,100,100)'
                        }
                     }
                  },
                  states: {
                     hover: {
                        marker: {
                           enabled: false
                        }
                     }
                  },
                  tooltip: {
                     headerFormat: '<b>{series.name}</b><br>',
                     pointFormat: '{point.x} cm, {point.y} kg'
                  }
               }
            };
            var series = [
               {
                  name: 'Female',
                  color: 'rgba(223, 83, 83, .5)',
                  data: [[name: 'Male',
                  color: 'rgba(119, 152, 191, .5)',
                  data: [[var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle = subtitle;
            json.legend = legend;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.series = series;
            json.plotOptions = plotOptions;
            $('#container').highcharts(json);
         });
      </script>
   </body>

</html>

結果

結果を確認します。

Highcharts-scatter-basic

目次

ハイチャート-散布図

構成

チャート

例

結果