Фон диаграммы Google с несколькими цветами - PullRequest
0 голосов
/ 09 октября 2018

Я создаю ниже простую диаграмму рассеяния только с одной точкой (у меня всегда есть только одна точка)

enter image description here

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

просто для справки, я добавляю образец изображения того, что цвета идут куда

enter image description here

IЯ много искал и не мог найти никакого решения для этого.Я пробовал линейные градиенты, но невозможно получить линейный градиент так, как я хотел.

Можно ли раскрасить прямоугольники сетки в диаграммах Google?Есть ли другой способ сделать это?

Спасибо.

1 Ответ

0 голосов
/ 09 октября 2018

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

для рассматриваемого графика вам понадобится 5 серий.

1) разброс
2) область - левый низкий
3) область - левый высокий
4) область - правый низкий
5) область - правый высокий

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'X', type: 'number'},
      {label: 'Left-Low', type: 'number'},
      {label: 'Left-High', type: 'number'},
      {label: 'Right-Low', type: 'number'},
      {label: 'Right-High', type: 'number'},
      {label: 'Y', type: 'number'}
    ],
    rows: [
      // scatter
      {c:[{v: 14}, {v: 130}, null, null, null, null]},
      // colors
      {c:[{v: 1}, null, {v: 170}, {v: 130}, null, null]},
      {c:[{v: 6}, null, {v: 170}, {v: 130}, null, null]},
      {c:[{v: 6}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
      {c:[{v: 15}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
    ]
  });

  var options = {
    colors: ['#ffffff'],
    legend: 'none',
    hAxis: {
      ticks: [1, 6, 15],
      title: 'Coleman-Liau Index'
    },
    height: 400,
    isStacked: true,
    series: {
      // Left-Low
      1: {
        areaOpacity: 1,
        color: '#e53935',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Left-High
      2: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Right-Low
      3: {
        areaOpacity: 1,
        color: '#43a047',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      },

      // Right-High
      4: {
        areaOpacity: 1,
        color: '#e53935',
        enableInteractivity: false,
        type: 'area',
        visibleInLegend: false
      }
    },
    seriesType: 'scatter',
    vAxis: {
      ticks: [40, 170, 300],
      title: 'Talking Speed (WpM)'
    }
  };

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