Блог

Главная - Вопросы по программированию - Как изменить цвет вертикальной линии с помощью Google chart candle stick?

Как изменить цвет вертикальной линии с помощью Google chart candle stick?

#charts #google-visualization

#Диаграммы #google-визуализация

Вопрос:

Я хочу изменить цвет диаграммы свечей. Когда fallingColor.fill и risingColor.fill установлены, цвет вертикальной линии остается синим, как на изображении.

введите описание изображения здесь

Это код, который я написал.

 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none',
      candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green 
      },
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
    </script>
  </head>

https://jsfiddle.net/fe26/t6b57vnL/7/

Как я могу изменить цвет линии?

Ответ №1:

вы можете использовать colors опцию, массив цветных строк.
каждый цвет в массиве применяется к каждой серии в таблице данных.
в опубликованном примере есть только одна серия, поэтому требуется / допускается только один цвет.

colors опция изменит цвет всех элементов диаграммы.
однако параметры fallingColor amp; risingColor переопределят colors параметр.
оставляя только вертикальные линии того же цвета, colors что и опция.

смотрите следующий рабочий фрагмент…

 google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ], true);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green 
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}); 
 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

вы также можете выбрать роль столбца стиля.

роль стиля добавляется в качестве дополнительного столбца в таблицу данных.
установите значение столбца в цвет / стиль, который вы хотите отобразить для каждой строки.

если значение стиля равно null , оно по умолчанию вернется к описанному выше сценарию.
однако, если это не null так, это переопределит оба варианта в приведенном выше сценарии.

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

 var data = google.visualization.arrayToDataTable([
  ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
  ['Mon', 20, 28, 38, 45, 'lime'],
  ['Tue', 31, 38, 55, 66, 'purple'],
  ['Wed', 50, 55, 77, 80, null],
  ['Thu', 77, 77, 66, 50, null],
  ['Fri', 68, 66, 22, 15, 'orange']
]);

смотрите следующий рабочий фрагмент…

 google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
    ['Mon', 20, 28, 38, 45, 'lime'],
    ['Tue', 31, 38, 55, 66, 'purple'],
    ['Wed', 50, 55, 77, 80, null],
    ['Thu', 77, 77, 66, 50, null],
    ['Fri', 68, 66, 22, 15, 'orange']
  ]);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}); 
 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

другим вариантом было бы использовать css и переопределить элементы svg для вертикальных линий,
которые рисуются с помощью <rect> элементов, с помощью —> width="2"
но я бы использовал это в качестве последнего средства.

 #chart_div rect[width="2"] {
  fill: #000000;
  stroke: #000000;
}

смотрите следующий рабочий фрагмент…

 google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
    ['Mon', 20, 28, 38, 45, 'lime'],
    ['Tue', 31, 38, 55, 66, 'purple'],
    ['Wed', 50, 55, 77, 80, null],
    ['Thu', 77, 77, 66, 50, null],
    ['Fri', 68, 66, 22, 15, 'orange']
  ]);

  var options = {
    legend:'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' },   // green
    },
    colors: ['magenta']
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}); 
 #chart_div rect[width="2"] {
  fill: #000000;
  stroke: #000000;
} 
 <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

вы также можете прослушать 'ready' событие диаграммы
и вручную изменить svg-элементы диаграммы, используя свой собственный скрипт.
но это не рекомендуется…

Комментарии:

1. Спасибо за подробное объяснение! Я переписал свой код с помощью столбца style role и работает отлично.

Метки: