Google Charts-Как изменить цвет линий в линейном графике для положительных и отрицательных значений оси - PullRequest
Новая
       7

Google Charts-Как изменить цвет линий в линейном графике для положительных и отрицательных значений оси

1 голос
/ 21 октября 2019

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

        var data = new google.visualization.DataTable();
        data.addColumn("string", "Year");
        data.addColumn("number", "Effective Investible Surplus");            
        data.addRows(dataSet);
        this.formatNumber.format(data,1);//indian currency format
        var options = {
            legend: this.legendStyle,
            areaOpacity: 0.8,
            backgroundColor: '#f5f1e7',
            animation: {
                startup: true,
                duration: 300,
                easing: 'linear',
            },
            hAxis: {
                title: "Years",
                titleTextStyle: this.chartTitleText
            },
            vAxis: {
                title: "Rupees",
                titleTextStyle: this.chartTitleText,
                format: this.numberPattern
            },
            colors: ["#b3dda7"]
        };
        var chart = new google.visualization.AreaChart(
            document.getElementById("chart_div")
        );
        chart.draw(data, options);
    });

1 Ответ

0 голосов
/ 21 октября 2019

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

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

далее, так как вы используете строку для оси x (дискретная ось),
мы будем иметь повторяющиеся метки каждый раз, когда нам нужно было вставить новую строку.

, чтобы избежать, мы можем использовать опцию hAxis.showTextEvery со значением 2.
это предотвратит повторение меток,
, но также заставит некоторые метки не появляться.

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataSet = [
    ['2010', 0],
    ['2011', 20],
    ['2012', -40],
    ['2013', 10],
    ['2014', -10],
    ['2015', 20],
    ['2016', 10],
    ['2017', -20],
    ['2018', 20],
    ['2019', -20]
  ];

  // add a value of zero where the value crosses the x-axis
  for (var i = (dataSet.length - 1); i >= 0; i--) {
    var val = dataSet[i][1];
    if ((i-1) >= 0) {
      var nextVal = dataSet[i-1][1];
      if ((val >= 0) && (nextVal < 0)) {
        dataSet.splice(i, 0, [dataSet[i][0], 0]);
      } else if ((val < 0) && (nextVal >= 0)) {
        dataSet.splice(i, 0, [dataSet[i][0], 0]);
      }
    }
  }


  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Effective Investible Surplus');
  data.addRows(dataSet);

  // create data view to add color
  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // include x & y column index
    0, 1,
    // add calculated color
    {
      calc: function(data, row) {
        var color = '#b3dda7';
        var val = data.getValue(row, 1);
        var nextVal = 0;
        if (row > 0) {
          nextVal = data.getValue(row - 1, 1);
        }
        if ((val < 0) || ((val === 0) && (nextVal < 0))) {
          color = '#f08080';
        }
        return color;
      },
      type: 'string',
      role: 'style'
    }
  ]);

  var options = {
    legend: 'none',
    areaOpacity: 0.8,
    backgroundColor: '#f5f1e7',
    animation: {
      startup: true,
      duration: 300,
      easing: 'linear',
    },
    hAxis: {
      title: 'Years',
      format: '0000',
      showTextEvery: 2
    },
    vAxis: {
      title: 'Rupees'
    }
  };

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