Question

我已经使用了盒子里的所有技巧。阅读完所有帮助文章后，我发现我认为这段代码应该可行。但它永远不会对我的酒吧进行颜色编码。我做错了什么？

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Fatal error: L3900U: Unrecognized option '--no_import_unresolved'

＆＃13;

Answer 1

如果您希望Bar Charts是垂直的，请使用Column Chart。柱形图的横向版本是条形图。

试试这个

＆＃13;

 google.charts.load("current", {
   packages: ['corechart']
 });
 google.charts.setOnLoadCallback(drawDualX);

 function drawDualX() {
   var data = google.visualization.arrayToDataTable([
    ['Date', 'Elevation', {
      role: 'style'
    }],
    ["2016-08-06T08:09:47Z", 1977.4, "color: yellow"],
    ["2016-08-06T08:13:29Z", 1981, "color: green"],
    ["2016-08-06T08:14:08Z", 1986.9, "color: yellow"],
    ["2016-08-06T08:14:22Z", 1988.9, "color: green"],
    ["2016-08-06T08:14:25Z", 1989.2, "color: green"],
    ["2016-08-06T08:14:29Z", 1989.7, "color: yellow"],
    ["2016-08-06T08:14:32Z", 1990.1, "color: green"],
   ]);

   var view = new google.visualization.DataView(data);
   view.setColumns([0, 1, {
       calc: "stringify",
       sourceColumn: 1,
       type: "string",
       role: "annotation"
     },
     2
   ]);

   var options = {
     title: "Elevation Chart",
     width: 600,
     height: 400,
     bar: {
       groupWidth: "95%"
     },
     legend: {
       position: "none"
     },
   };
   var material = new google.visualization.ColumnChart(document.getElementById("chart_div"));
   material.draw(view, options);
 }

＆＃13;

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

＆＃13;

Answer 2

这不起作用的原因是因为您创建的google.charts.Bar(...)对象是Google称之为材料图表的对象。这是一个完全重新设计的Google Visualization API实现，与他们称之为＆＃34; Classic＆＃34;图表包，目前仍处于测试阶段。这里有许多相关问题（见下文），并且材料图表尚不支持列角色（此处用于指定'color'）。

如果您想为每个数据点使用自定义样式，则必须使用较旧的（但支持得更好）Google Visualization＆＃34; Classic＆＃34; corechart包如下。图表的初始设计略有不同，但更广泛的自定义选项应该意味着您可以让它看起来如何！

＆＃13;

google.charts.load('current', {
  packages: ['corechart' /*, 'bar'*/ ] /* Don't need to load the bar package */
});
google.charts.setOnLoadCallback(drawDualX);

function drawDualX() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Elevation', {
      role: 'style'
    }],
    ['2016-08-06T08:09:47Z', 1977.4, 'color: yellow'],
    ['2016-08-06T08:13:29Z', 1981, 'color: green'],
    ['2016-08-06T08:14:08Z', 1986.9, 'color: yellow'],
    ['2016-08-06T08:14:22Z', 1988.9, 'color: green'],
    ['2016-08-06T08:14:25Z', 1989.2, 'color: green'],
    ['2016-08-06T08:14:29Z', 1989.7, 'color: yellow'],
    ['2016-08-06T08:14:32Z', 1990.1, 'color: green'],
  ]);
  var options = {
    chart: {
      title: 'Elevation Chart',
    },
    //bars: 'vertical' /* This option isn't required for "Classic" column chart */
  };

  /* Create a "Classic" Google Visualization Column Chart */
  var material = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  material.draw(data, options);
}

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google Chart Color个人栏

2 个答案: