在Google折线图API中使用字符串作为标签
Use String as label in Google Line Chart API
我希望使用字符串作为Google Chart api的x轴标签，用于折线图，我将两组数据连接在单线图中绘制两条线，我设法使它在没有字符串标签(与数字一起工作)的情况下工作，但没有轴线显示
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/(问题是现在没有轴线)如果我尝试添加字符串作为标签http://jsfiddle.net/j29Pt/535/图表似乎停止工作
首先，需要理解离散轴与连续轴
'string'列产生一个离散轴，'number'列a 连续轴
和某些配置选项只能在其中一个上工作
例如，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
相关文章：
- 在维护标识标签的字符串之间进行重复数据消除
- 如何使用 javascript 交换字符串中的特定标签
- 如何从内部HTML字符串中删除隐藏的标签
- 从字符串(JavaScript 或 PHP）的开头和结尾删除
- 标签
- Cheerio 'text(）' 空字符串用于 span 标签
- 如何使用 JavaScript(但不是标签或属性）替换字符串中所有匹配的纯文本字符串
- 如何获取带有正则表达式和变异元音的字符串的所有匹配项 - 哈斯标签
- 如何在没有 AngularJs 编码的情况下在图像“alt”标签中使用字符串
- 如何使用 jQuery 在标签的 for 属性中使用子字符串获取标签元素的值
- 在Javascript中，如何将字符串的“标签”放入数组中
- 替换子字符串，但如果在标签之间或用 javascript 在标签中替换子字符串，则不要替换子字符串
- 角度翻译服务:字符串中的 HTML 标签
- 将字符串标签添加到 jQuery Sparklines 插件的每个值
- 替换字符串中的所有 标签
- 突出显示 Vaadin 标签中的子字符串
- 选择标签 HTML 上的值将数组转换为字符串 Javascript
- 如何在中断后拆分字符串，然后是另一个标签外壳
- 检测字符串中的“模式”并将其包装在javascript(angular）中标签
- JQuery 获取标签内的 html 字符串
- Javascript替换字符串标签
