如何使用JSON数据为Google Charts实现样式或属性？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用JSON数据为Google Charts实现样式或属性？相关的知识，希望对你有一定的参考价值。
在使用JSON格式的数据时，将样式/属性应用于Google Visualization图表的各个点的正确方法是什么？具体来说，我需要根据数据更改图表上各个点的颜色。例如 - 使用下面的JSFiddle，你会如何将第一个点更改为另一种颜色？我已尝试使用“p”（属性）字段的各种选项，没有运气。有人知道怎么做吗？
https://jsfiddle.net/burtonrhodes/fpd08jrt/14/
Json数据
{
"cols": [
{
"id": "Week",
"label": "Week",
"type": "string",
"pattern": null,
"p": null
},
{
"id": "Showings",
"label": "Showings",
"type": "number",
"pattern": null,
"p": null
}
],
"rows": [
{
"c": [
{
"v": "1",
"f": null,
"p": null
},
{
"v": 2,
"f": null,
"p": {"point" : "fill-color: #FF7A06;"}
}
]
},
{
"c": [
{
"v": "2",
"f": null,
"p": null
},
{
"v": 1,
"f": null,
"p": null
}
]
}
]
}
当使用json时，它与其他答案的概念相同， 在样式的系列列之后添加一列， 如下...
{
"cols": [
{
"id": "Week",
"label": "Week",
"type": "string",
"pattern": null,
"p": null
},
{
"id": "Showings",
"label": "Showings",
"type": "number",
"pattern": null,
"p": null
},
{
"id": "Sytle",
"role": "style",
"type": "string",
"pattern": null,
"p": null
}
],
"rows": [
{
"c": [
{
"v": "1",
"f": null,
"p": null
},
{
"v": 2,
"f": null,
"p": null
},
{
"v": "point {fill-color: #ff7a06;}",
"f": null,
"p": null
}
]
},
{
"c": [
{
"v": "2",
"f": null,
"p": null
},
{
"v": 1,
"f": null,
"p": null
},
{
"v": null,
"f": null,
"p": null
}
]
}
]
}
关键是要有一个属性 - > "role": "style"
样式应该是行的值。
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
"cols": [
{
"id": "Week",
"label": "Week",
"type": "string",
"pattern": null,
"p": null
},
{
"id": "Showings",
"label": "Showings",
"type": "number",
"pattern": null,
"p": null
},
{
"id": "Sytle",
"role": "style",
"type": "string",
"pattern": null,
"p": null
}
],
"rows": [
{
"c": [
{
"v": "1",
"f": null,
"p": null
},
{
"v": 2,
"f": null,
"p": null
},
{
"v": "point {fill-color: #ff7a06;}",
"f": null,
"p": null
}
]
},
{
"c": [
{
"v": "2",
"f": null,
"p": null
},
{
"v": 1,
"f": null,
"p": null
},
{
"v": null,
"f": null,
"p": null
}
]
}
]
});
let chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, {
title: "Showings by Week",
fontName: "Arial",
fontSize: 14,
titleTextStyle: {
color: "#2B557D"
},
pointSize: 6,
colors: ['#C6D9FD'],
lineWidth: 1,
curveType: "line",
vAxis: {
minValue:0,
viewWindow: {
min: 0
},
maxValue: 3
},
hAxis: {
maxAlternation: 1,
//title: 'Week'
},
legend: {
position: 'none'
},
tooltip: {
ishtml: true
},
animation:{
duration: 1500,
easing: 'out',
startup: true
}
});
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>使用Google的Charts API在折线图上自定义数据点的颜色，大小和形状的一种方法是通过JSON和内联样式来实现。
要将此技术应用于您的代码，您首先要修改图表数据的格式（即chart_data_json div中提供的格式），如下所示：
<!--
The third column allows you to specify optional styling, ie orange fill and
sizing for the first data point
-->
<div id="chart_data_json">
[
[1, 2, "point { size: 4; fill-color: orange; }"],
[2, 1, null]
]
</div>
然后，您需要更新图表代码，以便它可以使用这种新的数据格式。这里的主要思想是使用内置的google.visualization.arrayToDataTable()方法来简化这一过程。另请注意{'type': 'string', 'role': 'style'}的存在，它指定图表API应将第三列中的数据解释为样式信息：
/* Parse JSON from data element */
let jsonData = JSON.parse( $('#chart_data_json').text() );
/* Define the rules for how charts api should interpret columns in data */
let dataTable = [
[{ 'type' :'string'}, 'Y', {'type': 'string', 'role': 'style'}]
];
/* Add parsed json data to data table */
dataTable = dataTable.concat(jsonData)
/* Pass json data to arrayToDataTable() */
var data = google.visualization.arrayToDataTable(dataTable);
对于完整的工作演示，see this jsFiddle。希望有所帮助！
以上是关于如何使用JSON数据为Google Charts实现样式或属性？的主要内容，如果未能解决你的问题，请参考以下文章
Google Charts interpolateNulls无效