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