Блог

Каков правильный способ применения стилей / свойств к отдельным точкам диаграммы визуализации 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
        }
      ]
    }
  ]
}
  

это та же концепция, что и в другом ответе при использовании 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>  

Один из способов настроить цвет, размер и форму точек данных на линейной диаграмме с помощью 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. Надеюсь, это поможет!