Foros del Web » Programando para Internet » Javascript »

array de colores en highcharts

Estas en el tema de array de colores en highcharts en el foro de Javascript en Foros del Web. Hola Gracias por leer mi Post, tengo el siguiente problema este es un codigo de highcharts. me gustaria mostrar los colores en cada cadena que ...
  #1 (permalink)  
Antiguo 08/10/2020, 17:35
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 652
Antigüedad: 19 años, 4 meses
Puntos: 6
array de colores en highcharts

Hola Gracias por leer mi Post, tengo el siguiente problema este es un codigo de highcharts.
me gustaria mostrar los colores en cada cadena que traigo desde un DB.

si escribo un color en la cadena principal toda las barras me dan un solo color.
la idea es que sea diferentes colores. mas abajo hay un ejemplo en JS
{
color: 'COLOR',
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}


Codigo original

NOTA:
se podria usar el CSS que trae el mismo codigo AQUI y no es la idea

si me gustaria que quede algo similar a estos colores y no los que estan por defecto

Código HTML:
Ver original
  1. <!DOCTYPE HTML>
  2.     <head>
  3.  
  4.         <title>Highcharts</title>
  5.  
  6.         <style type="text/css">
  7. .highcharts-figure, .highcharts-data-table table {
  8.     min-width: 310px;
  9.     max-width: 800px;
  10.     margin: 1em auto;
  11. }
  12.  
  13. #container {
  14.     height: 400px;
  15. }
  16.  
  17. .highcharts-data-table table {
  18.     font-family: Verdana, sans-serif;
  19.     border-collapse: collapse;
  20.     border: 1px solid #EBEBEB;
  21.     margin: 10px auto;
  22.     text-align: center;
  23.     width: 100%;
  24.     max-width: 500px;
  25. }
  26. .highcharts-data-table caption {
  27.     padding: 1em 0;
  28.     font-size: 1.2em;
  29.     color: #555;
  30. }
  31. .highcharts-data-table th {
  32.     font-weight: 600;
  33.     padding: 0.5em;
  34. }
  35. .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  36.     padding: 0.5em;
  37. }
  38. .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  39.     background: #f8f8f8;
  40. }
  41. .highcharts-data-table tr:hover {
  42.     background: #f1f7ff;
  43. }
  44.  
  45.         </style>
  46.     </head>
  47.     <body>
  48. <script src="././highcharts.js"></script>
  49.  
  50.  
  51.  
  52.     <div id="container"></div>
  53.  
  54.  
  55.  
  56. <script type="text/javascript">
  57. Highcharts.chart('container', {
  58.     chart: {
  59.         type: 'bar'
  60.     },
  61.     title: {
  62.         text: 'Historic World Population by Region'
  63.     },
  64.     subtitle: {
  65.         text: 'Source: Wiki</a>'
  66.     },
  67.     xAxis: {
  68.         categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
  69.         title: {
  70.             text: null
  71.         }
  72.     },
  73.     yAxis: {
  74.         min: 0,
  75.         title: {
  76.             text: 'Population (millions)',
  77.             align: 'high'
  78.         },
  79.         labels: {
  80.             overflow: 'justify'
  81.         }
  82.     },
  83.     tooltip: {
  84.         valueSuffix: ' millions'
  85.     },
  86.     plotOptions: {
  87.         bar: {
  88.             dataLabels: {
  89.                 enabled: true
  90.             }
  91.         }
  92.     },
  93.     legend: {
  94.         layout: 'vertical',
  95.         align: 'right',
  96.         verticalAlign: 'top',
  97.         x: -40,
  98.         y: 80,
  99.         floating: true,
  100.         borderWidth: 1,
  101.         backgroundColor:
  102.             Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
  103.         shadow: true
  104.     },
  105.  
  106.     series: [{
  107.         name: 'Year 1800',
  108.         data: [107, 31, 635, 203, 2]
  109.     }, {
  110.         name: 'Year 1900',
  111.         data: [133, 156, 947, 408, 6]
  112.     }, {
  113.         name: 'Year 2000',
  114.         data: [814, 841, 3714, 727, 31]
  115.     }, {
  116.         name: 'Year 2016',
  117.         data: [1216, 1001, 4436, 738, 40]
  118.     }]
  119. });
  120.         </script>
  121.     </body>
  122. </html>


la idea es que muestre el color en la cadena que, vaya apareciendo, sin tener que escribir en cada uno de ellos
Código Javascript:
Ver original
  1. /*
  2.         como ejemplo
  3.         color: ['PRIMER COLOR', 'SEGUNDO COLOR', 'TERCER COLOR', 'CUARTO COLOR'],
  4. */
  5.  
  6.         series: [{
  7.             color: 'PRIMER COLOR',// aqui trae el primer color
  8.             name: 'Year 1800',
  9.             data: [207, 31, 635, 203, 2]
  10.         }, {
  11.             color: 'SEGUNDO COLOR',
  12.             name: 'Year 1900',
  13.             data: [133, 156, 947, 408, 6]
  14.         }, {
  15.             color: 'TERCER COLOR',
  16.             name: 'Year 2000',
  17.             data: [814, 841, 3714, 727, 31]
  18.         }, {
  19.             color: 'CUARTO COLOR',
  20.             name: 'Year 2016',
  21.             data: [1216, 1001, 4436, 738, 40]
  22.         }]
  23.     });

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:25.