在Google Line Chart API中使用String作为标签-Java 学习之路

我希望使用String作为Google Chart api的X轴的标签，用于Line Chart，我在两行数据中绘制两条线在单线图中绘制，我设法使其无需String标签（适用于数字）但没有显示haxis线

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string', 'Month');
    data1.addColumn('number', 'Average Sales Price');
	data1.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
    data1.addRows([
        [{v: 0, f:'Q4 2013'}, 3,'<span class="total-home-tooltip">$300K Some html - 1!</span>'],
        [{v: 1, f:'Q1 2014'}, 6,'<span class="total-home-tooltip">$600K Some html - 2!</span>'],
        [{v: 2, f:'Q2 2014'}, 5,'<span class="total-home-tooltip">$500K Some html - 3!</span>'],
        [{v: 3, f:'Q3 2014'}, 8,'<span class="total-home-tooltip">$800K Some html - 4!</span>'],
        [{v: 4, f:'Q4 2014'}, 2,'<span class="total-home-tooltip">$200K Some html - 5!</span>'],
        [{v: 5, f:'Q1 2015'}, 5,'<span class="total-home-tooltip">$500K Some html - 6!</span>'],
        [{v: 6, f:'Q2 2015'}, 5,'<span class="total-home-tooltip">$500K Some html - 7!</span>']
    ]);
    
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Month');
    data2.addColumn('number', 'Median Sales Price');
	data2.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
	
	/*if we would like to show string in x asix we have to use data in format {v: 0, f:'Q4 2013'} otherwise google api will not draw haxis lines */
    data2.addRows([
        [{v: 0, f:'Q4 2013'}, 5,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 1, f:'Q1 2014'}, 1,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 2, f:'Q2 2014'}, 3,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 3, f:'Q3 2014'}, 9,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 4, f:'Q4 2014'}, 4,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 5, f:'Q1 2015'}, 5,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 6, f:'Q2 2015'}, 7,'<span class="total-home-tooltip">Some html here</span>']
    ]);
    	var options1 = {
		legend: {
			position: 'bottom',
			textStyle: {color: 'black', fontSize: 14},
			pointShape: "triangle",
			alignment: 'end'
		},
		interpolateNulls: true,
		height: 312,
        width: 1070,
		colors: ['#EBAD00','#00ACE0'],
		pointSize: 8,
		backgroundColor: {fill: "transparent"},
		tooltip: {isHtml: true},
		hAxis: {
			minValue: 0,
			baselineColor:"#BBBBBB"

		},
		vAxis: {
			gridlines: {color: "transparent"},
			minValue: 0,
			baselineColor:"#BBBBBB"
		},
		 ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'},{v: 4, f:'May'},{v: 5, f:'June'},{v: 6, f:'July'}], // <------- This does the trick
     
		annotations: {
			style: 'line'
		}

	};
    var joinedData = google.visualization.data.join(data1, data2, 'full', null, [1,2], [1,2]);
    
    var chart = new google.visualization.LineChart(document.getElementById('market_trend_chart1'));
    chart.draw(joinedData, options1  );
}

<div id="market_trend_chart1"></div>

我收到此错误错误：类型不匹配 . 值0与列索引0中的类型字符串不匹配，我理解错误是变量类型不匹配但不太确定如何解决此问题

工作小提琴没有字符串标签http://jsfiddle.net/j29Pt/536/（问题是现在没有haxis行）如果我尝试添加String作为标签http://jsfiddle.net/j29Pt/535/图表似乎停止工作

1 回答

首先，需要了解discrete vs continuous轴

'string' 列生成离散轴，
'number' 列为连续轴

和certian configuration options只能在一个或另一个上工作

例如， hAxis.ticks 仅适用于连续轴（和 vAxis.ticks ）

所以如果你想要一个真正的 'string' 用于x轴，你将无法使用 ticks

以下是一个工作示例，使用问题中的代码，使用 'string'

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn('string', 'Month');
  data1.addColumn('number', 'Average Sales Price');
  data1.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
  data1.addRows([
    ['Q4 2013', 3, '<span class="total-home-tooltip">$300K Some html - 1!</span>'],
    ['Q1 2014', 6, '<span class="total-home-tooltip">$600K Some html - 2!</span>'],
    ['Q2 2014', 5, '<span class="total-home-tooltip">$500K Some html - 3!</span>'],
    ['Q3 2014', 8, '<span class="total-home-tooltip">$800K Some html - 4!</span>'],
    ['Q4 2014', 2, '<span class="total-home-tooltip">$200K Some html - 5!</span>'],
    ['Q1 2015', 5, '<span class="total-home-tooltip">$500K Some html - 6!</span>'],
    ['Q2 2015', 5, '<span class="total-home-tooltip">$500K Some html - 7!</span>']
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('string', 'Month');
  data2.addColumn('number', 'Median Sales Price');
  data2.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});

  data2.addRows([
    ['Q4 2013', 5, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q1 2014', 1, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q2 2014', 3, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q3 2014', 9, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q4 2014', 4, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q1 2015', 5, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q2 2015', 7, '<span class="total-home-tooltip">Some html here</span>']
  ]);

  var options1 = {
    legend: {
      position: 'bottom',
      textStyle: {color: 'black', fontSize: 14},
      pointShape: 'triangle',
      alignment: 'end'
    },
    interpolateNulls: true,
    height: 312,
    width: 1070,
    colors: ['#EBAD00','#00ACE0'],
    pointSize: 8,
    backgroundColor: {fill: 'transparent'},
    tooltip: {isHtml: true},
    hAxis: {
      minValue: 0,
      baselineColor: '#BBBBBB'
    },
    vAxis: {
      gridlines: {color: 'transparent'},
      minValue: 0,
      baselineColor:"#BBBBBB"
    },
    annotations: {
      style: 'line'
    }
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0,0]], [1,2], [1,2]);

  var chart = new google.visualization.LineChart(document.getElementById('market_trend_chart1'));
  chart.draw(joinedData, options1);
}

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

上述答案的问题， data.join 方法对数据进行排序，
导致季度出现故障（由于字符串排序）

作为一种解决方法，您可以添加一个额外的列进行排序，

然后使用DataView隐藏排序列

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn('string', 'Month');
  data1.addColumn('number', 'Average Sales Price');
  data1.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
  data1.addColumn('number', 'Sort');
  data1.addRows([
    ['Q4 2013', 3, '<span class="total-home-tooltip">$300K Some html - 1!</span>', 0],
    ['Q1 2014', 6, '<span class="total-home-tooltip">$600K Some html - 2!</span>', 1],
    ['Q2 2014', 5, '<span class="total-home-tooltip">$500K Some html - 3!</span>', 2],
    ['Q3 2014', 8, '<span class="total-home-tooltip">$800K Some html - 4!</span>', 3],
    ['Q4 2014', 2, '<span class="total-home-tooltip">$200K Some html - 5!</span>', 4],
    ['Q1 2015', 5, '<span class="total-home-tooltip">$500K Some html - 6!</span>', 5],
    ['Q2 2015', 5, '<span class="total-home-tooltip">$500K Some html - 7!</span>', 6]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('string', 'Month');
  data2.addColumn('number', 'Median Sales Price');
  data2.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
  data2.addColumn('number', 'Sort');

  data2.addRows([
    ['Q4 2013', 5, '<span class="total-home-tooltip">Some html here</span>', 0],
    ['Q1 2014', 1, '<span class="total-home-tooltip">Some html here</span>', 1],
    ['Q2 2014', 3, '<span class="total-home-tooltip">Some html here</span>', 2],
    ['Q3 2014', 9, '<span class="total-home-tooltip">Some html here</span>', 3],
    ['Q4 2014', 4, '<span class="total-home-tooltip">Some html here</span>', 4],
    ['Q1 2015', 5, '<span class="total-home-tooltip">Some html here</span>', 5],
    ['Q2 2015', 7, '<span class="total-home-tooltip">Some html here</span>', 6]
  ]);

  var options1 = {
    legend: {
      position: 'bottom',
      textStyle: {color: 'black', fontSize: 14},
      pointShape: 'triangle',
      alignment: 'end'
    },
    interpolateNulls: true,
    height: 312,
    width: 1070,
    colors: ['#EBAD00','#00ACE0'],
    pointSize: 8,
    backgroundColor: {fill: 'transparent'},
    tooltip: {isHtml: true},
    hAxis: {
      minValue: 0,
      baselineColor: '#BBBBBB'
    },
    vAxis: {
      gridlines: {color: 'transparent'},
      minValue: 0,
      baselineColor:"#BBBBBB"
    },
    annotations: {
      style: 'line'
    }
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0,0]], [1,2,3], [1,2,3]);
  joinedData.sort([{column: 3}]);

  var joinedView = new google.visualization.DataView(joinedData);
  joinedView.hideColumns([3, 6]);

  var chart = new google.visualization.LineChart(document.getElementById('market_trend_chart1'));
  chart.draw(joinedView, options1);
}

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

此外，使用问题中的方法也很好

如果要使用数字列，则每个单元格都有一个值（ v: ）和一个格式化值（ f: ）

格式化的值（ f: ）将始终为 'string'

但值（ v: ）必须与列的类型匹配

data1.addColumn('number', 'Month');      // <-- type must match v:
data1.addRows([[{v: 0, f:'Q4 2013'}]]);

使用 ticks 时适用同样的规则

回复于 2024-05-13T19:11:57+08:00

在Google Line Chart API中使用String作为标签

1 回答

相关问题