如何使用 JSON 数据为 Google Charts 实现样式或属性？

Question

使用 JSON 格式的数据时，将样式/属性应用于 Google 可视化图表的各个点的正确方法是什么？ 具体来说，我需要根据数据更改图表上各个点的颜色。 例如 - 使用下面的 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
        }
      ]
    }
  ]
}

Answer 1

使用 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);

有关完整的工作演示，请参阅此 jsFiddle 。 希望有帮助！

Answer 2

使用 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>