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

Question

在使用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
        }
      ]
    }
  ]
}

Answer 1

当使用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" 样式应该是行的值。

style role reference

请参阅以下工作代码段...

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>

Answer 2

使用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。希望有所帮助！