Как реализовать стиль или свойства для Google Charts, используя данные JSON?

Question

Как правильно применить стили / свойства к отдельным точкам для диаграммы визуализации Google при использовании данных в формате JSON? В частности, мне нужно изменить цвет отдельных точек на графике в зависимости от данных. Например - с 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"
стиль должен быть значением строки.

ссылка на роль стиля

см. Следующий рабочий фрагмент ...

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

Для полной рабочей демонстрации, см. Этот jsFiddle ,Надеюсь, это поможет!