You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用Google Charts绘制目标图表?已尝试代码未达预期

求助:用Google Charts实现目标图表

各位开发者好,我需要用Google Charts绘制示例快照里的图表,求帮忙实现这类图表。

我试过下面的代码,但没得到预期效果:

function drawProdListChart() {
    //var data = google.visualization.arrayToDataTable([
    //    ['Product', 'Sales', { role: "style" }],
    //    ['Product A', 50000, '#FFC000'],
    //    ['Product B', 60000, '#3FC099'],
    //    ['Product C', 26300, '#ED7D31'],
    //    ['Product D', 51100, '#FFC000'],
    //    ['Product E', 13000, '#73A4FA'],

    //]);
    var data = google.visualization.arrayToDataTable([
        ['Category', 'V1', 'V2', 'V3','V4', 'V5'],
        ['Vodka', 43000, 65000, 60000,65000,60000],
        ['Gin', 43000, 65000, 60000, 65000, 60000],
        ['Wine', 43000, 65000, 60000, 65000, 60000]
    ]);
    var view = new google.visualization.DataView(data);
    
    
    var options = {
        
            legend: { position: 'bottom', maxLines: 3, textStyle: { fontSize: 7 } },
            backgroundColor: 'transparent',
            width: 400,
            height: 250,
            bar: { groupWidth: '75%' },
            vAxis: { gridlines: { count: 4 }, textStyle: { fontSize: 8 } },
            hAxis: { textStyle: { fontSize: 7 } },
        
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("prodListChart"));
    chart.draw(view, options);
    
}
// HTML部分
<div id="prodListChart"></div>

当前输出和预期不符,现有样式未达到目标效果。


内容的提问来源于stack exchange,提问作者SAURAV KUMAR

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 10:05:23