0
195
ViewsHighcharts JS elimina consejos y leyendas cuadradas para gráficos lineales
TL; DR: quiero que mi gráfico de gráficos altos se vea igual que el de Shopify
Estoy tratando de lograr dos cosas para las que no he encontrado respuesta en los documentos, literalmente intenté todo
- Quiero eliminar las sugerencias de líneas de cuadrícula que se muestran para cada entrada.
- Haga que el símbolo de la leyenda sea un cuadrado (he probado el símboloRadio, pero también quiero eliminar la línea allí); básicamente, nada de lo que he probado funciona para un gráfico de líneas.
⬇️
Aquí están las propiedades del xAxis y la legend :
xAxis: { categories: categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'May', 'Jun', 'Jul'], labels: { formatter: function () { return moment(this.value).isValid() ? moment(this.value).format('MMM DD') : this.value }, step: getLabelStepBasedOnCategories(categories), staggerLines: 1, style: { color: '#637381', }, }, crosshair: { width: 4.3, color: '#DFE3E8', }, gridLineDashStyle: 'dash', gridLineWidth: 1, gridLineColor: '#DFE3E8', tickmarkPlacement: 'inside', startOnTick: true, endOnTick: true, } legend: { symbolHeight: 12, symbolWidth: 12, symbolRadius: 3, itemDistance: 8, align: 'right', itemStyle: { fontSize: '12px', color: '#6d7175', fontWeight: 400, letterSpacing: '-0.5px', }, },1 answers
Answer question0
No estoy 100% satisfecho con mi solución, pero honestamente no encontré otro enfoque.
1.) Pruebe la propiedad tickInterval. Con eso, debería poder reducir el espacio entre las marcas del eje. (Ejemplo también en jsfiddle). Enlace al documento
2.) Es posible sobrescribir la función de símbolo de leyenda y dibujar el icono de etiqueta con rutas SVG.
Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) { proceed.call(this, legend); this.legendLine.attr({ d: ['M', 0, 10, 'h', 0, 0, 5, 5] }).attr({ 'stroke-width': 10 }); });Adición: También es posible sobrescribir los marcadores con un icono, el icono también se mostrará en la leyenda. La desventaja es que, si deshabilita los marcadores, también se deshabilitará el símbolo de la leyenda.
Encontré esa solución en Highcharts-Forums -> to the Topic .
Editar 20 de mayo de 2022
Se agregó un enlace al nuevo jsFiddle con nuevos símbolos de leyenda con estilo. Agregue un enlace a la herramienta SVG Path-Editor, para modificar simplemente SVG-Paths.
Enlace al nuevo jsfiddle con bordes redondos cuadrados
Increíble SVG Path-Editor del usuario de GitHub Yqnn
this.legendLine.attr({ d: ['M', 2, 2, 'L', 5, 2, 'C', 7, 2, 7, 2, 7, 4, 'L', 7, 7, 'C', 7, 9, 7, 9, 5, 9, 'L', 2, 9, 'C', 0, 9, 0, 9, 0, 7, 'L', 0, 4, 'C', 0, 2, 0, 2, 2, 2] }).attr({ 'stroke-width': 7 }); });