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