代码之家 › 专栏 › 技术社区 › yash041

google charts图形设置图例值和相同颜色列

google-visualization charts jquery

yash041 · 技术社区 · 6 年前

数据=[[“product1”,3.612671999999977],“product2”,6.827597999999],“product2”,1008.0]]当我使用数组数据并在列或条形图中实现时,时间仅显示为图例值,而不是“不同的产品名称”,所有条形图看起来都是相同的颜色列。我想在所有列中添加图例名称作为产品名称和不同颜色

    google.charts.load('current', {
      packages: ['corechart']
    }).then(function () {
     

      
     $.ajax({
        url: 'path to data',
        dataType: 'json'
      }).done(function (jsonData) {
        loadData(jsonData);
      }).fail(function (jqXHR, textStatus, errorThrown) {
        var jsonData = [["product1",450],["product2",23],["product3",1008.0]];
        loadData(jsonData, '1', 'Column');
      });

      // load json data
      function loadData(jsonData, id, chartType) {
        // create data table
        var dataTable = new google.visualization.DataTable();

        switch (chartType) {
          case 'Column':
            // add date column
            dataTable.addColumn('string', 'Product');
            dataTable.addColumn('number', 'Value');

            $.each(jsonData, function(productIndex, product) {
              // add product data
              dataTable.addRow([
                product[0],
                product[1],
              ]);
            });
            break;

         
        }

        // draw chart
        $(window).resize(function () {
          drawChart(id, chartType, dataTable);
        });
        drawChart(id, chartType, dataTable);
      }

      // save charts for redraw
      var charts = {};
      var options = {
        Column: {
          chartArea: {
            height: '100%',
            width: '100%',
            top: 64,
            left: 64,
            right: 32,
            bottom: 48
          },
          height: '100%',
          legend: {
            position: 'top'
          },
          pointSize: 4,
          width: '100%'
        },
        Pie: {
          height: '100%',
          width: '100%'
        },
        Line: {
          height: '100%',
          width: '100%',
          legend: {
            position: 'bottom'
          },
          pointSize: 4,
          width: '100%'
        }

      };

      // draw chart
       function drawChart(id, chartType, dataTable) {
        if (!charts.hasOwnProperty(id)) {
          charts[id] = new google.visualization.ChartWrapper({
            chartType: chartType + 'Chart',
            containerId: 'chart-' + id,
            options: options[chartType]
          });
        }
        charts[id].setDataTable(dataTable);
        charts[id].draw();
      }
    });

    html, body {
      height: 100%;
      margin: 0px 0px 0px 0px;
      overflow: hidden;
      padding: 0px 0px 0px 0px;
    }

    .chart {
      display: inline-block;
      height: 100%;
      width: 32%;
    }

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div class="chart" id="chart-0"></div>
    <div class="chart" id="chart-1"></div>
    <div class="chart" id="chart-2"></div>

1 回复 | 直到 6 年前

WhiteHat 6 年前

在这种情况下,您要创建列对于每种产品,
而不是行对于每个产品。。。

请参阅以下工作段。。。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // save charts for redraw
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 64,
        left: 64,
        right: 32,
        bottom: 48
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      pointSize: 4,
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    },
    Line: {
      height: '100%',
      width: '100%',
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      width: '100%'
    }
  };

  var jsonData = [["product1",450],["product2",23],["product3",1008.0]];
  loadData(jsonData, '1', 'Column');

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('string', 'Category');
        var rowIndex = dataTable.addRow();
        dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0));

        $.each(jsonData, function(productIndex, product) {
          var colIndex = dataTable.addColumn('number', product[0]);
          // add product data
          dataTable.setValue(rowIndex, colIndex, product[1]);
        });
        break;
    }

    // draw chart
    $(window).resize(function () {
      drawChart(id, chartType, dataTable);
    });
    drawChart(id, chartType, dataTable);
  }

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: chartType + 'Chart',
        containerId: 'chart-' + id,
        options: options[chartType]
      });
    }
    charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-1"></div>