Extiende los símbolos del renderizador de Highcharts para tener un signo más

¿Cómo puedo ampliar la biblioteca de símbolos de renderizado de Highcharts para include un signo "Más"?

2 Solutions collect form web for “Extiende los símbolos del renderizador de Highcharts para tener un signo más”

Referencia de API de plotOptions.series.marker.symbol

símbolo: cadena

Una forma o símbolo pnetworkingefinido para el marcador. Cuando es nulo, el símbolo se extrae de options.symbols. Otros valores posibles son "círculo", "cuadrado", "diamante", "triángulo" y "triángulo abajo".

Además, la URL de un gráfico se puede dar en este formulario: "url (graphic.png)". Tenga en count que para que la image se aplique a los charts exportados, el server de export debe tener acceso a su URL.

Las devoluciones de llamadas personalizadas para la generación de routes de símbolo también se pueden agregar a Highcharts.SVGRenderer.prototype.symbols. La callback se usa luego por su nombre de método, como se muestra en la demostración.

Al igual que en el último párrafo anterior, definiríamos la ruta del símbolo para crear un más. Esto es lo que dice la documentacion sobre Renderer.path

Agregue una ruta basada en los commands de ruta de SVG. En browseres compatibles con SVG, todos los commands de ruta son compatibles, pero en VML solo se admite un subset: movimiento absoluto a (M), línea absoluta a (L), curva absoluta a (C) y cierre (Z).

Y así es como se vería el sistema de coorderadas, el punto real en el centro de la caja awxh con su esquina superior izquierda colocada en (x, y) yy aumentando a medida que avanzamos hacia abajo y x aumentando a medida que avanzamos hacia el derecho.

enter image description here

Aquí es cómo harías un plus

// Define a custom symbol path Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h) { return ['M', x, y + h / 2, 'L', x + w, y + h / 2, 'M', x + w / 2, y, 'L', x + w / 2, y + h, 'z']; }; if (Highcharts.VMLRenderer) { Highcharts.VMLRenderer.prototype.symbols.plus = Highcharts.SVGRenderer.prototype.symbols.plus; } 

Para explicar la matriz en palabras

  1. 'M', x, y + h / 2 : movemos nuestro bolígrafo a pt. A (x, y + h / 2)
  2. 'L', x + w, y + h / 2: Dibujamos una línea desde la position actual a pt. B (x + w, y + h / 2). Esto dibuja la línea horizontal del más desde A <-> B
  3. 'M', x + w / 2, y: Ahora movemos el lápiz a pt. C (x + w / 2, y), observe que al mover el lápiz no se crea ningún gráfico o línea
  4. 'L', x + w / 2, y + h: Ahora trazamos una línea desde la position actual a pt. D (x + w / 2, y + h). Esto dibuja la línea vertical del plus C <-> D
  5. 'z': cerramos el renderizador / bolígrafo

Símbolo de marcador personalizado @jsFiddle

La respuesta aceptada solo da una línea por cruz. Yo quería un signo más completo. Aquí está el código para hacer eso en su lugar:

 Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h) { return [ 'M', x, y + (5 * h) / 8, 'L', x, y + (3 * h) / 8, 'L', x + (3 * w) / 8, y + (3 * h) / 8, 'L', x + (3 * w) / 8, y, 'L', x + (5 * w) / 8, y, 'L', x + (5 * w) / 8, y + (3 * h) / 8, 'L', x + w, y + (3 * h) / 8, 'L', x + w, y + (5 * h) / 8, 'L', x + (5 * w) / 8, y + (5 * h) / 8, 'L', x + (5 * w) / 8, y + h, 'L', x + (3 * w) / 8, y + h, 'L', x + (3 * w) / 8, y + (5 * h) / 8, 'L', x, y + (5 * h) / 8, 'z' ]; }; if (Highcharts.VMLRenderer) { Highcharts.VMLRenderer.prototype.symbols.plus = Highcharts.SVGRenderer.prototype.symbols.plus; } 

Esto producirá un plus al 25% de ancho por cada barra.

  • contentDocument en jQuery
  • SVG acercar el mouse - model matemático
  • El apéndice de jquery no funciona con svg element?
  • Campo de input de text basado en SVG
  • D3 añadir elemento solo si el elemento no existe
  • Conversión de canvas o puntos de control a SVG
  • Cómo calcular projection.scale () en D3.js para un map mundial a pantalla completa
  • IE9 importando elementos en línea SVG <image> rotos
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.