Question

如何在一张图表上混合线条和散点图？

第1栏：Y（日期）

第2列：X1（数字，作为点/点）

第3列：X2（数字，行）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="1000"
        android:fromYDelta="150%"
        android:toYDelta="0" />
</set>

它似乎不是文档中的一种方式或示例。

Answer 1

使用series选项更改第2列

的样式

  series: {
    0: {
      pointSize: 8,
      lineWidth: 0
    }
  }

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

＆＃13;

google.charts.load('current', {
  callback: drawMultipleTrendlineChart,
  packages:['corechart']
});

function drawMultipleTrendlineChart() {
  var chart;

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sales value A');
  data.addColumn('number', 'Sales value B');
    
  data.addRows([
    [new Date(2013, 3, 11),   200,  1000],
    [new Date(2013, 4, 02),   500,  650],
    [new Date(2013, 5, 03),   700,  550],
    [new Date(2013, 6, 04),   800,  95],
    [new Date(2013, 7, 05),   500,  400],
    [new Date(2013, 8, 06),   900,  250],
    [new Date(2014, 0, 07),   800,  300],
    [new Date(2014, 1, 08),  2000,  200],
    [new Date(2014, 2, 09),  1000,  312]
  ]);


  var formatter = new google.visualization.NumberFormat({
      fractionDigits: 2,
      prefix: 'R$:'
  });
  formatter.format(data, 1);
  var dateFormatter = new google.visualization.NumberFormat({
      pattern: 'MMM yyyy'
  });
  dateFormatter.format(data, 0);
  var chartHeight = 400;
  var chartWidth = 600;
  var chartOptions = {
      tooltip: {
          isHtml: true
      },
      title: 'multiple lines',
      isStacked: true,
      width: chartWidth,
      height: chartHeight,
      colors: ['#0000D8', '#00dddd'],
      hAxis: {
          title: 'example title',
          slantedText: false,
          slantedTextAngle: 45,
          textStyle: {
              fontSize: 10
          },
          format: 'dd-MM-yyyy'
      },
      chartArea: {
          left: 50,
          top: 20,
          width: (chartWidth - 10),
          height: (chartHeight - 90)
      },
      series: {
        0: {
          pointSize: 8,
          lineWidth: 0
        }
      }
  };
  chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
  chart.draw(data, chartOptions);
}

＆＃13;

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

＆＃13;

在GoogleChart上将一列显示为点，将其他列显示为一行

1 个答案: