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

时间：2016-09-18 10:56:42

标签： javascript charts google-visualization

我希望使用String作为Google Chart api X-Axis的标签，用于折线图，在这里我连接两组数据以在单线图中绘制两条线，我设法让它工作，没有String标签（与数字一起使用）但没有显示haxis行

＆＃13;
＆＃13; 
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  );
}
＆＃13; 
<div id="market_trend_chart1"></div>
＆＃13;
＆＃13;
＆＃13;

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

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

1 个答案:

答案 0 :(得分：0)

首先，需要了解discrete vs continuous轴

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

和certian configuration options仅适用于其中一个

例如，

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

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

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="market_trend_chart1"></div>
＆＃13;
＆＃13;
＆＃13;

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

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

然后使用DataView隐藏排序列

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="market_trend_chart1"></div>
＆＃13;
＆＃13;
＆＃13;

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

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

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

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

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

使用ticks

时适用相同的规则
相关问题
最新问题