个人中心
gpt4 book ai didi

javascript - 在 Google Line Chart API 中使用字符串作为标签

转载 作者：行者123 更新时间：2023-11-28 05:32:55 25 4
gpt4 key购买 nike

我希望使用字符串作为折线图 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 中的类型字符串不匹配，我知道错误是变量类型不匹配，但不太确定如何解决此问题

没有字符串标签的工作 fiddle http://jsfiddle.net/j29Pt/536/ (问题是现在没有轴线)如果我尝试添加字符串作为标签 http://jsfiddle.net/j29Pt/535/图表似乎停止工作

最佳答案

首先，需要了解discrete vs continuous轴

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

和特定的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'}]]);

使用刻度线时适用相同规则

关于javascript - 在 Google Line Chart API 中使用字符串作为标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39556883/

25 4 0
文章推荐： Javascript - 使用 PHP 后的 Promise，得到未定义的结果
文章推荐： javascript - 输入按钮的 Angular 验证
文章推荐： javascript - 使用 JavaScript 实现文本动画
文章推荐： C++ if 命令读取 true 尽管 false
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com