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

有关完整的演示，请see this 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"
的属性样式应该是该行的值。

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>

如何使用JSON数据实现Google图表的样式或属性？

2 个答案: