如何将Google折线图的图例图标设置为线条而不是正方形

Question

我一直试图弄清楚this JSFiddle中的第一个图表如何将图例图标作为线条而不是方块。与具有正方形作为图标的折线图图例here相比。我认为它与x轴是一个日期有关，但这似乎不适用于我的数据。 有谁知道如何将Google线条图表图例的图标明确设置为线条而非正方形？

这些是正确显示折线图的图表选项：

var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        },
          legend: {position: 'bottom'}
      };

Answer 1

事实上，如果您使用google.visualization.LineChart的最新版本（ v1.1 ），则使用线条样式呈现图例，如下所示。

示例

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart" style="width: 640px; height: 480px"></div>

在预览版本中，图例将呈现为盒装图标。

示例

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ]);

    var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>
<div id="chart" style="width: 640px; height: 480px"></div>

  

注意：两个例子之间的唯一区别是版本   文库

关于自定义图表图例。

根据Configuration Options，可以自定义以下legend属性：

  

  
• alignment传奇的对齐
  
• maxLines图例中的最大行数
  
• position传奇的位置
  
• textStyle指定图例文本样式的对象。
  

由于没有指定图标样式的属性，因此为了创建更自定义的图例，将禁用图表图例并使用html / css创建自定义图例。