Gráfico de spline con marcadores de Highcharts

Highcharts 曲线图Gráfico de spline de Highcharts

El siguiente ejemplo muestra un gráfico de spline con marcadores.

En los capítulos anteriores hemos aprendido la sintaxis de configuración de Highcharts. Ahora veamos cómo configurarla.

Configuración

Usamos la propiedad marker.symbol para configurar los marcadores. Los marcadores pueden ser 'square', 'diamond' o una URL de imagen. Los marcadores se pueden agregar en cualquier punto de datos:

var series= [{
      name: 'Tokyo',
      marker: {
         symbol: 'square'
      },
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
         y: 26.5,
         marker: {
            symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
         }
      }, 23.3, 18.3, 13.9, 9.6]
   }, {
      name: 'London',
      marker: {
         symbol: 'diamond'
      },
      data: [{
         y: 3.9,
         marker: {
            symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
         }
      }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Ejemplo

Nombre de archivo: highcharts_spline_symbols.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://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: 'spline'      
   }; 
   var title = {
      text: 'Monthly Average Temperature'   
   };
   var subtitle = {
      text: 'Source: WorldClimate.com'
   };
   var xAxis = {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   };
   var yAxis = {
      title: {
         text: 'Temperature'
      },
      labels: {
         formatter: function () {
            return this.value + '\xB0';
         }
      },
      lineWidth: 2
   };
   var tooltip = {
      crosshairs: true,
      shared: true
   };
   var plotOptions = {
      spline: {
         marker: {
            radius: 4,
            lineColor: '#666666',
            lineWidth: 1
         }
      }
   };
   var series= [{
         name: 'Tokyo',
         marker: {
            symbol: 'square'
         },
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
            y: 26.5,
            marker: {
               symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
            }
         }, 23.3, 18.3, 13.9, 9.6]
      }, {
         name: 'London',
         marker: {
            symbol: 'diamond'
         },
         data: [{
            y: 3.9,
            marker: {
               symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
            }
         }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];      
      
   var json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

El resultado del ejemplo anterior es:

Highcharts 曲线图Gráfico de spline de Highcharts

Otras extensiones