Google图表将折线图的笔触宽度设置为null

Question

我目前面临Google图表的问题，看起来相当简单。我只需要删除当前图表的笔触宽度：

并使其如下图所示：

我所拥有的是堆积区域图表，因此选项设置如下：

 var options = {
    'title': '',
    isStacked: true,
    legend: {
        textStyle: { fontSize: '16' },
        position: 'top'
    },
    hAxis: {
        title: '',
        gridlines: {
            color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis 
        },
        textStyle: {
            fontName: 'Arial',
            fontSize: '18'
        }
        //ticks: [0, 100, 200, 75, 100] // display labels every 25
    },
    vAxis: {
        title: '',
        gridlines: {
            color: '#D3D3D3',
            count: 10,
            //lineDashStyle: [2,2]
        },
        textStyle: {
            fontName: 'Arial',
            fontSize: '18'
        },
        viewWindow: { max: range_max, min: range_min } //TODO: make them generable
        //showTextEvery: 100
    },
    'width':  1100, //100% //TODO: make this relative
    'height': 600,
    crosshair:
    {
        trigger: 'both'
    },
    series:
    {
        0: { pointSize: 8 },
        3: { lineDashStyle: [5, 1, 3] },
        4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
        5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
    },
    intervals: { 'style': 'line' },
    colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}

但是strokeWidth属性似乎不起作用。对我的错误有任何建议吗？

Answer 1

使用样式列，您可以单独自定义每个系列

它适用于所有Column Roles，（注释，样式等）

该角色适用于它所遵循的系列列

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],

      // add same style for each point, series 1 only
      ['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
      ['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
      ['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
      ['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
    ]);

    var options = {
      isStacked: true,
      title: 'Company Performance',
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      vAxis: { minValue: 0 },
      series:
      {
        0: { id: 'ss223', type: 'area', color: 'transparent' },
        1: { type: 'area', color: 'black' },
        2: { type: 'line', color: 'red' },
        3: { type: 'line', color: 'blue' }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

上述示例存在问题，图例现在与系列风格

不同步

使用图表的'ready'事件来更正图例条目，
黑线将是path元素

取决于使用的样式，逻辑可能需要调整，但在这里工作

容器中找到的元素与数据的顺序相同

请参阅以下工作代码段以更正图例条目...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],

      // add same style for each point, series 1 only
      ['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
      ['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
      ['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
      ['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
    ]);

    var options = {
      isStacked: true,
      title: 'Company Performance',
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      vAxis: { minValue: 0 },
      series:
      {
        0: { id: 'ss223', type: 'area', color: 'transparent' },
        1: { type: 'area', color: 'black' },
        2: { type: 'line', color: 'red' },
        3: { type: 'line', color: 'blue' }
      }
    };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ComboChart(container);

    google.visualization.events.addListener(chart, 'ready', function () {
      Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
        if (path.getAttribute('stroke') === '#000000') {
          path.setAttribute('stroke', 'transparent');
        }
      });
    });

    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>