Как изменить цвет бара в Highcharts

Я использую Highcharts для построения диаграмм, а цвет по умолчанию, который я вижу, является синим. Как изменить цвет на зеленый?Как изменить цвет бара в Highcharts

Я попытался добавить массив цветов, посмотрев онлайн-API http://api.highcharts.com/highcharts#colors, но может быть, я не устанавливаю его в нужном месте.

Highcharts JS v4.1.9

index.jsp

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Start Page</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
    </head> 
    <body> 
     <h1 align="center">Highcharts - Basic Column Chart demo!</h1> 
     <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> 
     <script language="JavaScript"> 
      $(document).ready(function() { 
       var chart = { 
        type: 'column' 
       }; 
       var title = { 
        text: 'Monthly Average Rainfall' 
       }; 
       var subtitle = { 
        text: 'Source: WorldClimate.com' 
       }; 

       var xAxis = { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
        crosshair: true 
       }; 
       var yAxis = { 
        min: 0, 
        title: { 
         text: 'Rainfall (mm)' 
        } 
       }; 
       var tooltip = { 
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
          '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
        footerFormat: '</table>', 
        shared: true, 
        useHTML: true 
       }; 
       var plotOptions = { 
        column: { 
         pointPadding: 0.2, 
         borderWidth: 0 
        } 
       }; 
       var credits = { 
        enabled: false 
       }; 

       var series = [{ 
         name: 'Tokyo', 
         data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
        }]; 

       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; 
       json.credits = credits; 
       $('#container').highcharts(json); 
      }); 
     </script> 
    </body> 
</html>

Пожалуйста, руководство.

источник

2015-10-16 user2325154

API говорит все. Создание зеленой линии #009933 работает, просто добавив ее в свой цветовой массив в своих настройках. Свойство colors - это просто массив, а не объект json.

jsfiddle example

colors:['#009933']

В документации говорится, что будет петлевые все цвета до тех пор, как вы что-то осталось.

Когда все цвета используются, новые цвета вытягиваются с самого начала.

Использование вашего синтаксиса будет выглядеть примерно так, как ваше свойство series, которое также является массивом.

var colors = ['#009933']; 
json.colors = colors;

источник

2015-10-16 15:29:09

Должен ли я добавить это в нижней части непосредственно перед '# container' линии, как это? 'json.colors = colors: ['# 009933'];' – user2325154

Не стоит беспокоиться. Получил это рабочий :) – user2325154

Спасибо за быстрый ответ – user2325154

One more way of doing it here

определяют цвета массива и вставить в json.colors

var colors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'] ;

источник

2015-10-16 15:49:38

Как изменить цвет бара в Highcharts

ответ

Смежные вопросы