Настройка диаграммы материала Google.

Question

Мне нужно составить диаграмму, как на картинке, и она выглядит почти так же, как в таблице материалов из Google, но для этого требуется немного изменений. До сих пор я не нашел способ изменить цвет при наведении, число тиков или количество строк и ширину области диаграммы. Кто-нибудь может мне помочь ?

google.charts.load('current', {'packages':['corechart','bar']}); 
 
google.charts.setOnLoadCallback(barChart); 
 
function barChart() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Opening Move', 'Percentage', { role: 'style' }], 
 
    ["King's pawn (e4)", 44, ' ' ], 
 
    ["Queen's pawn (d4)", 31, ''], 
 
    ["Knight to King 3 (Nf3)", 12,''], 
 
    ["Queen's bishop pawn (c4)", 10,''], 
 
    ['Other', 3, ''] 
 
    ]); 
 

 
    var options = { 
 
    width: 520, 
 
    height: 320, 
 
    legend: { 
 
     position: 'none' 
 
     }, 
 
    bars: 'horizontal', 
 
    axes: { 
 
     x: { 
 
     0: { 
 
      side: 'top', 
 
      label: 'Percentage', 
 
     } 
 
     } 
 
    }, 
 
    hAxis: { ticks: [10,20,30] }, 
 
    bar: { groupWidth: "90%" }, 
 
// chartArea: { 
 
//  width: '78%', 
 
//  left: '22%' 
 
// }, 
 
    colors:['#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd'] 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('bar-chart')); 
 
    chart.draw(data, options); 
 
    }

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="bar-chart"></div>

Answer 1

Вы используете Материал столбчатых диаграмм, которые имеют сейчас очень ограниченный набор функций (как указано here и here).

Это объясняет, почему область галочек & не работает. Я создал скрипку с рабочей, а не материальной версией: https://jsfiddle.net/5Lnbbbbw/1/.

Он похож, но использует:

var chart = new google.visualization.BarChart(document.getElementById('bar-chart')); 

вместо

var chart = new google.charts.Bar(document.getElementById('bar-chart')); 

Теперь для висения: это трудно, так как нет никаких вариантов, что управляет его. Фактически, то, что вы видите при наведении & на клик, - это новые элементы, добавленные в диаграмму; он не управляется через css.

Однако, вы можете сделать это:

#bar-chart svg g[clip-path] g:not(:first-child) rect:hover { 
    fill: blue; 
    stroke: black; 
    stroke-width: 1; 
} 

Область диаграммы является элементом SVG g, который имеет атрибут clip-path. Первый ребенок группирует все галочки (вертикальные линии), поэтому мы не хотим добавлять для них свойство css.

Обратите внимание: если вы удалите галочки, вам, вероятно, придется немного обновить css.

Если вы хотите узнать больше о параметрах css, которые у вас есть для баров, вы можете найти больше информации here.

Answer 2

Я нашел этот код, который добавляет процент к барам на диаграмме, используя jQuery. Может быть, это будет полезно?

http://codepen.io/sharkers/pen/qmrjVe

$(document).ready(function() { 
startProdChart(); }); 

function startProdChart() { 
    google.charts.load("current", { packages: ["bar"] }); 
    google.charts.setOnLoadCallback(drawProdChart); 
} 

function drawProdChart() { 
    //create the main array that we need to fill up 
    var prodChart = []; 

//create the initial header array and populate with values 
var header = ["Month", "Finance Reserve"]; //the static pieces 
var prodDiv = $('.the-record[data-type="totals"][data-record="store totals"] .product-labels'); 
prodDiv.each(function() { 
    var prodName = $(this).find(".header-labels .record-label").text(); 
    header.push(prodName); 
}); 

//push header info into array 
prodChart.push(header); 

//collect data from each monthly record 
var chartData = $('.the-record[data-record="store totals"][data-type="totals"] .record-column span[data-label="income"]'); 
chartData.each(function() { 
    var tempProd = []; 
    var chartDate = $(this).parent().data("date"), 
     chartXLabels = $(this) 
      .closest(".vehicle-labels") 
      .find('.header-labels .record-label[data-date="' + chartDate + '"]') 
      .text(), 
     chartDataTotalIncome = parseInt($(this).text().replace(/\$|,/g, "")), 
     chartFinanceTotal = parseInt(
      $(this) 
       .closest(".record-holder") 
       .find(
        '.finance-labels .record-column[data-date="' + 
         chartDate + 
         '"] span[data-label="financeamt"]' 
       ) 
       .text() 
       .replace(/\$|,/g, "") 
     ), 
     chartFinancePerc = chartFinanceTotal/chartDataTotalIncome, 
     chartProducts = $(this) 
      .closest(".record-holder") 
      .find(
       '.product-labels .record-column[data-date="' + chartDate + '"] span.amt' 
      ); 

    //if untitled, label 'Averages' 
    if (chartXLabels == "") { 
     chartXLabels = "Average"; 
    } 

    //push labels and finance numbers in array 
    tempProd.push(chartXLabels); 
    tempProd.push(chartFinanceTotal); 

    //push product totals into array one by one 
    chartProducts.each(function() { 
     var chartProductsTotal = parseInt($(this).text().replace(/\$|,/g, "")), 
      chartProductsPerc = 
       parseInt($(this).text().replace(/\$|,/g, ""))/chartDataTotalIncome; 
     tempProd.push(chartProductsTotal); 
    }); 

    prodChart.push(tempProd); 
}); 

var data = google.visualization.arrayToDataTable(prodChart); 

//set chart options 
var options = { 
    chart: { 
     title: "Total Income Percentage", 
     subtitle: "Products and Finance Reserve" 
    }, 
    bars: "vertical", 
    vAxis: { 
     format: "$#,###", 
     textPosition: "inside" 
    }, 
    height: 700, 
    series: { 
     0: { 
      color: "#3eb42f" 
     }, 
     1: { 
      color: "#2264ae" 
     } 
    }, 
    isStacked: "true" 
}; 

var chart = new google.charts.Bar(
    document.getElementById("monthly-income-chart") 
); 

chart.draw(data, google.charts.Bar.convertOptions(options)); 
google.visualization.events.addListener(chart, "ready", drawMoInc); //run the addPercs function after chart ready 

function drawMoInc() { 
    addPercs("monthly-income-chart"); 
} 

}

//this is a function that will add percentages within the sections of a stacked bar chart 

функция addPercs (chartId) {// Google материальные диаграммы имеют два элемента, которые составляют один бар, потенциально несколько элементов 'Rect' и один " path ', поэтому мы используем пути для получения числа баров var thisChart = $ ("#" + chartId), gLast = thisChart.find ("svg g: last"), // последний g - это то, где всплывающая подсказка появляется, нужно вставить наш новый текст ПЕРЕД этим элементом barPath = thisChart.find ("svg g: eq (2) путь"), // третий элемент g - это то, где находятся пути pathAmt = barPath.length, // количество путей будет скажите нам, сколько у нас баров на диаграмме barRect = thisChart.find ("svg g: eq (2) rect"), // третий элемент g - это то, где прямые находятся rectAmt = barRect.length, rectGroup = rectAmt/pathAmt, // узнать, сколько прямоугольных секций находится в одном баре rectSelect = 0;

console.log(thisChart.attr("id")); 

//create an empty 'g' element, append to the 'svg' element, give it a class, shift it up one so it's second to last 
var newTextSvg = document.createElementNS("http://www.w3.org/2000/svg", "g"); 

thisChart.find("svg").append(newTextSvg); 
newTextSvg.setAttribute("class", "newtext"); 
thisChart.find(".newtext").insertBefore(gLast); 

//get the parts of the bar and create percentages 
barPath.each(function() { 
    var totalRectHeight = 0, 
     thisGroup = rectSelect * rectGroup, 
     thisSet = rectSelect * rectGroup; 

    //get total height of all rects in a single bar 
    for (i = 0; i < rectGroup; i++) { 
     var thisRectHeight = barRect[thisGroup].getBBox().height; 

     totalRectHeight = thisRectHeight + totalRectHeight; 
     thisGroup++; 
    } 

    //get path info 
    var pathHeight = barPath[rectSelect].getBBox().height, 
     pathWidth = barPath[rectSelect].getBBox().width, 
     pathPosX = barPath[rectSelect].getBBox().x, 
     pathPosY = barPath[rectSelect].getBBox().y; 

    //do some math real quick like 
    var totalHeight = pathHeight + totalRectHeight, 
     pathPerc = Math.round(pathHeight/totalHeight * 100); 

    //get all the rect info within the bar 
    for (i = 0; i < rectGroup; i++) { 
     var rectHeight = barRect[thisSet].getBBox().height, 
      rectWidth = barRect[thisSet].getBBox().width, 
      rectPosX = barRect[thisSet].getBBox().x, 
      rectPosY = barRect[thisSet].getBBox().y, 
      rectPerc = Math.round(rectHeight/totalHeight * 100), 
      rectText = document.createTextNode(rectPerc + "%"); 

     //create new svg text elements for the rect parts of the chart 
     if (rectHeight !== 0) { 
      var newRectText = document.createElementNS(
       "http://www.w3.org/2000/svg", 
       "text" 
      ); 
      newRectText.appendChild(rectText); 
      newTextSvg.appendChild(newRectText); 
      newRectText.setAttribute("x", rectPosX); 
      newRectText.setAttribute("y", rectPosY); 
      newRectText.setAttribute(
       "style", 
       "cursor: default; user-select: none; -webkit-font-smoothing: antialiased;" 
      ); 
      newRectText.setAttribute("fill", "#ffffff"); 
      var rectTextWidth = newRectText.getBBox().width, 
       rectTextHeight = newRectText.getBBox().height, 
       rectOffsetX = rectWidth/2 - rectTextWidth/2, 
       rectOffsetY = 24; 
      if (rectTextHeight + rectOffsetY * 2 >= rectHeight) { 
       rectOffsetY = rectHeight/2 + rectTextHeight/3.5; 
      } 

      newRectText.setAttribute("dx", rectOffsetX); 
      newRectText.setAttribute("dy", rectOffsetY); 
     } 
     thisSet++; 
    } 

    //path vars 
    var pathText = document.createTextNode(pathPerc + "%"); 

    //create a new svg text element for the path parts of the chart 
    var newPathText = document.createElementNS(
     "http://www.w3.org/2000/svg", 
     "text" 
    ); 
    newPathText.appendChild(pathText); 
    newTextSvg.appendChild(newPathText); 
    newPathText.setAttribute("x", pathPosX); 
    newPathText.setAttribute("y", pathPosY); 
    newPathText.setAttribute(
     "style", 
     "cursor: default; user-select: none; -webkit-font-smoothing: antialiased;" 
    ); 
    newPathText.setAttribute("fill", "#ffffff"); 

    //get numbers to set the text position 
    var pathTextWidth = newPathText.getBBox().width, 
     pathTextHeight = newPathText.getBBox().height, 
     pathOffsetX = pathWidth/2 - pathTextWidth/2, 
     pathOffsetY = 24; 
    if (pathTextHeight + pathOffsetY * 2 >= pathHeight) { 
     pathOffsetY = pathHeight/2 + pathTextHeight/3.5; 
    } 

    newPathText.setAttribute("dx", pathOffsetX); 
    newPathText.setAttribute("dy", pathOffsetY); 

    rectSelect++; //go up one 
}); 

}